Images for Online vs Print

There will come a time when you may need to upload images of your product online or add them into a printed flier or postcard. In that case it will be helpful to know that the images you use online are different than the ones you use in printed materials. The two main reasons they are different are to do with the image resolution and the color mode.

Image Resolution

An image is made up of little dots of color, the more dots there are, the crisper and more fine the image. If an image does not have enough dots it becomes jagged and rough or "pixelated". When we see an image on a screen it typically only has 72 dots per square inch (dpi), computer screens can not typically handle anything bigger. Printed images are much bigger than what we see on a screen and therefore need more dots per inch. The optimal size for a printed image is 300dpi. Images that are produced for printed materials can generally be made fairly large without any pixelation. Once a screen image is saved at 72dpi it can not be made any bigger. (See Below)

This image shows what happens when you try to magnify an online image from it's original size.

This image shows what happens when you try to magnify an online image from it's original size.

Color Mode

If you are going to be creating a quick image for a brochure or posting a product picture online you will need to pay attention to the color mode. Designers use a variety of color systems but the most basic differences are online colors and printed colors. Computer screens use a three color system, Red, Green and Blue (RGB) to combine dots/pixels and create color in the image. RGB doesn't translate the same on paper as it does on the screen. In the case of printed materials, we use a four color system, Cyan, Magenta, Yellow, Key/Black (CMYK). You may have experienced this when you have pulled an image from a website and tried to print it out but the color does not match once printed. Below is an example of the four color system, CMYK (Black in the middle) and the three color system, RGB

cmyk.jpg

The important things to remember are

Online: 72dpi, RGB
Printed: 300dpi CMYK

If you would like to discuss more about this topic, please contact me.