Transitioning Your Printed Materials to the Web – Part 2: Images, Resolution and Colors, Oh My!

photo credit: bjornmeansbear

By Matt Cook
Point Click Media

Last week we opened up a new topic that will hopefully help ease the transition of getting your business materials onto the web. To review last week’s opening article on layouts, click the following link:

Part 1: Layouts

We continue the theme this week by examining the differences in how images and content are displayed visually between print and web and the technology that binds them.

Learning About Images, Resolution & Color Profiling

Have you ever wondered why those photos you grabbed off of your friends’ Facebook page just don’t print out very well? They’re all blurry and pixelated… Well, the issue you’re facing when trying to print photographs from the web is that the web displays images at 72 dpi (dots per inch). This means that there are 72 dots of color defined within each inch of your image. Printed materials traditionally begin at 300 dpi and up. The higher the dpi on your images, the better quality and better definition your prints will have. Unfortunately for the web, 72 dpi is all we have to work with, which is fine for viewing on monitors or hanging up on your fridge at home, but don’t expect to be able to grab a photo off of the web and use it professionally to print a billboard advertisement.

Another thing to keep in mind when transitioning between the web and print is the difference in color profiling. The print world typically uses a four-color process to print your materials called the CMYK spectrum (Cyan, Magenta, Yellow, Black). As you overlay each of these four color channels on top of each other, you’re essentially presented with a full color image. The web on the other hand utilizes the RGB spectrum (Red, Green, Blue) to view digital images. Monitors, televisions and other digital screens all use the RGB spectrum.

To learn more about how CMYK vs. RGB works, this article explains the differences quite well:

http://www.printernational.org/rgb-versus-cmyk.php

Due to the differences in the way the CMYK and RGB modes display colors, there are bound to be discrepancies when switching between them. Whether you’re attempting to convert printed materials to the web or vice versa, if your color modes are not adjusted properly, you’re likely to notice a difference in colors during the transition.

Finally, printers often use a numerical value to determine colors used in printed works to ensure that a color comes out properly.  While the web also has a numbering system to identify colors, it’s impossible to adjust the color balance of a user’s monitor. Colors will always vary from monitor to monitor, so if you’re set on getting that shade of red just right, let it be known that it will never be perfect for everyone.

Next up is every designer’s worst nightmare: Dealing with web safe fonts.