Menu
Website Basics

Digital Assets for Web + Print

BACK TO THE BASICS. WHAT ARE DIGITAL ASSETS?

Let’s define it. A digital asset is content that is created and stored digitally. The asset could be physically printed (print) or live digitally (web). For example,  images, logos, illustrations, animations and spreadsheets are considered digital assets. 

The technology used to bring the digital asset to life determines what rules to play by. The print world and the web world are separate and they play by their own rules. Thinking about them separately is the most helpful way to lay a baseline of knowledge. 

Color mode, resolution, size and file formats are the four basic components to help understand the versatility of digital assets.

COLOR

Color is a complex topic in and of itself. To get a good grasp, let’s start with the print world because before digital existed, print was already there. 

  • In the print world, the CMYK color model (Cyan, Magenta, Yellow, Key (black)) is the foundation. Brochures, t-shirts, stickers, posters are great examples of a digital asset that uses a print technology to become tangible and sensory. 
  • In the web world, the RGB color model (Red, Green, Blue) is the foundation. Websites, social media and apps are examples of a digital platform made of numerous digital assets.

The dollar and euro are both currency, but they have different rules of use and handling. CMYK and RGB color models are like currency in this way. Knowing that CMYK and RGB are different explains the color variance between the intended outputs. 

Have you ever compared your logo on a monitor to a printed collateral piece? The colors are different. Why is that? We have expounded on the following variances with our clients which has proved helpful to them and hopefully to you as well: 

  • Web to Print - Your logo will look different on screen than a printed piece. This is the foundational exchange rate, if you will, between CMYK (print) and RGB (web).
  • Web to Web - Since technology is constantly improving, it is possible that the same logo could look different from screen to screen. 

 The next three categories stand alone independently but also have a relationship with each other. Resolution, size, quality.

RESOLUTION

Image resolution and quality is a key consideration in the creative production process. It’s important to know about resolution and how it relates to quality.

First, a little jargon.

  • DPI: Dots per inch. Generally used in printing, this refers to the dots of ink on one line across one inch. 
  • PPI: Pixels per inch. This term is mostly used for monitors and video production. A pixel is a dot on a video screen.

Image Reference

For print: A document or image ready to be printed is a file set at 300dpi. 

For web: Images saved for web use should be set at 72 ppi. The web only processes imagery at a resolution of 72, so be aware that uploading images with a higher resolution could unnecessarily use up server space and slow your page speed down.

SIZE

Don’t confuse image size with file size. Both resolution and quality of an image affects file size. 

For print - Sizing for a printed piece is straightforward since it’s a physical item; a 5x7 photograph, an 8.5x11 brochure. Likely a designer is involved and they would set the appropriate size within the file. 

For web - For a digital output, it is important to size the asset for the content area it will be displayed in. Initially it takes a little more effort, but by doing this you can help avoid pixelation or stretching/reducing the image. As an example, the web page you are updating has three different sized image areas: 200x200; 400x400 and 800x800. It is best to determine where you want each asset on the page and size for individual display area. 

A good rule of thumb when saving files for web use is to keep resolution 72 ppi and file size at 100K. Web banner images can be a challenge to keep under a 100K file size, so you may need to reduce image quality within Photoshop or Photopea. 

FILE FORMAT

For Print (CMYK) - high resolution files needed (300 dpi).

  • .eps - vector-based art or .ai file in Illustrator.
  • .jpg - includes white (or other color) background
  • .png - has transparent background
  • .pdf - universal file format 

For Web (RGB) - web resolution files needed (72 ppi)

  • .svg - web vector form
  • .jpg - has white background and is smaller in file size compression
  • .png - only save as png if you need a transparent background. This file size compression is larger and you will need to reduce image quality. 


Please note that a “low resolution” print file is still too high in resolution to upload to your website. There is a difference between low-resolution print and web resolution file. To ensure that your website is not slowed down by unnecessarily large files, save at 72 ppi and 100k file size.