Taming color: Why do my images
look different on the web?

By Craig Goldwyn, visibility.tv

Have you noticed that the wall of TVs at Best Buy all show color differently? Well we have the same problem on the web, and it can be a biiiiig problem if you have something color critical to sell, like clothing, artwork, paint, or ink.

Online retailers report that one of the most frequent reasons for returns is because a product's actual color was different than what was expected. The need for color accuracy is especially important to photographers and artists. Color management is also necessary if you are producing books or magazines. Because color conveys emotions and messages, we work hard to get them right. Here's what you need to know.

First of all, no two TVs in Best Buy or computer monitors display color the same. Although broadcasters make sure the images they send out meet strict international color standards, they have no control over the way the image is displayed, and there is no way for viewers to calibrate their sets with the broadcaster's images. Fortunately the computer world has a solution to the problem, and it is called color management.

Not only are computer monitors different, digital cameras, scanners, and printers are different. They are different from each other, and they can even be different from themselves over time! A monitor's colors can shift as the phosphors in the screen age, images captured by a scanner can change with the aging of the bulb, and different papers, inks, and toners can change the look of the print. In fact, two monitors made by the same manufacturer can be slightly different.

To further complicate matters, each device has a different color gamut meaning its ability to capture or display a range of colors varies. For example, monitors usually cannot display all the colors captured by a digital camera. Things get really sticky when you consider that monitors display colors by mixing tiny dots (pixels) of red, green and blue (RGB) while printers create colors by mixing cyan, magenta, yellow, and black (CMYK).

Another important factor is the resolution of the display. Computer monitors typically use 72-96 dots per inch (dpi), newspaper pictures are about the same, glossy magazines typically run from 100 to 300 dpi, and art mags and books can go 300 dpi or higher.

So the way professionals TRY to manage the process is with color calibration tools and software. If you have products to show on a website where color is critical, you should make sure your photographer and webmaster use them.

They should be using a device called a "puck" that attaches to their monitors and tells them how to adjust their monitors to make sure the colors shown are correct. They should also be attaching an International Color Consortium (ICC) standard profile to each image. What is a color profile?

Several years ago Apple Computer developed a system called ColorSync that has helped set industry standards for describing the capabilities and individual tendencies of different devices such as monitors, printers, and scanners. These descriptions are called ICC profiles and they are also used on Windows computers. An ICC Profile might say something like this: "to correct the color on this particular Teriyaki 20 inch monitor, add 10% red, subtract 4% green, and darken the blue 1%." Ditto for scanner and printer profiles.

Then there's the Windows world. You guessed it, colors (and font sizes) are slightly different on Windows machines and instead of adopting the ColorSync standard, Microsoft has created its own system called Image Color Management (ICM).

Although all modern PCs have the ability to use ColorSync or ICM, most folks don't calibrate their monitors. The good news is that the computer makers are working with the web standards team to set up techniques for insuring proper color display.

Preparing images for the web

In order to get the best color rendition for a photo for the web as well as the highest quality image with the smallest file size for fastest display, the goal is an image that is 72 dpi, 8 bits, sRGB, jpg.

Let me translate: 72 dpi means 72 dots per inch. That is a typical grid of dots on a computer monitor. 8 bits is the lowest amount of color information packed into each dot, and that is also all a monitor and a web browser can deliver. SRGB is an "ICC Profile", a way of compacting the range of colors in a picture into the capabilities of the monitor. For example, paper can display a wider gamut of colors than a computer monitor so if we are printing we use a different color profile. The ICC Profile that works best for computer monitors is called sRGB. There are other RGB color profiles, but you want the one with the lower case "s" if you are preparing an image for the web. Note that this is the lowest common denominator, and you never want this profile for an image you intend to print. Finally, the file type you want is a jpg. This is a compressed format that is best for photos or images with continuous tone such as shadows. Use gif for images that are mostly solid colors such as logos.

Here's how to do this if you are using Photoshop CS3 (the menus are similar for earlier versions):

Pull down the "Image" menu and select "RGB Color" and "8 Bits/Channel". Then chose the "Edit" Menu and select "Convert to profile". Then chose "Profile sRGB IEC61966-2.1, Engine Adobe (ACE), Intent Relative Colorimetric, Use Blackpoint Compensation, Use Dither."

Then chose the "Edit" menu and "Save for Web & Devices". Click on "Image Size" and choose the size you want in pixels and "Quality Bicubic". In the upper left click on the "4-Up" tab. You can then pick the one that looks best. For photos chose, I usually select "JPEG High". Uncheck the boxes by ICC Profile" and "Progressive". "Blur" should be 0 and "Matte" should be blank. Now I know I said we want the sRGB profile and I just told you to uncheck the color profile box. That's because attaching the color profile to the document makes the image larger, and since we've already converted it to the sRGB profile which is optimized for the web, and most web browsers can't read profiles, we don't need it.

Finally, click the "Save" button, make sure the next window is set for "Format Images Only" and "Default Settings", give your document an appropriate name, make sure it has either a ".jpg" or ".gif" suffix, and click "Save". You're done. Whew!

Resources