Email	Print Reprint
	add to:
	Del.icio.us Digg Google Furl	Slashdot Y! MyWeb Blink

Rank: 2 Other articles in this colorful package include: • Tools for Color Management Introduces you to four technologies for color calibration. • "How Color Works" Gives you a solid explanation on how the hexadecimal numbering system works.

If you're not losing sleep over color accuracy right now, you probably will be soon. E-commerce has created new demand for precise rendering of product images. So before you spend too much time tossing and turning over this issue, take a look at some of our tips for presenting color cleanly on the Web.

For many of you, preparing images for web publishing goes something like this: You scan your images as faithfully as possible, save them at the highest JPEG compression level you can get away with, then cross your fingers as you send them off into cyberspace. Yet how many times have you pulled up a page on your friend's computer (or worse yet, the client's) only to stare in horror at an image that looks very different than you remember? Who can you blame for this? Well, the monitor itself is a good place to start.

Monitors are like snowflakes

Generally speaking, no two uncalibrated monitors display colors alike. There are several reasons for this inconsistency—variances in monitor design, graphics cards, computer configurations and even ambient room lighting. Since the most common display for desktop computers is still the CRT monitor, let's take a look at how it works.

A look inside the monitor to examine CRT color production. Image provided by Sonnetech, Ltd.

The gamma setting has a tremendous impact on how pictures appear on your monitor. Ask folks what gamma is, and you'll get a variety of explanations. Generally speaking, gamma controls the intensity of the middle tones, which affects the overall rendering of your image. When pictures look either "washed out" or "too dark," chances are the gamma setting is wrong.

Most designers are aware that images created on a Mac appear darker than those created on a Windows PC, and vice versa. The gamma setting has a lot to do with those differences. The default gamma setting on a Mac is 1.80, and for Windows it's 2.20. Recently, Hewlett Packard surveyed monitors and found a very broad distribution of gamma settings. The average monitor gamma was set at 2.20 (Windows) with a standard deviation of 0.20. So the monitors out there are displaying your images at varying intensities, which greatly affects their color rendering.

Those of you who have Photoshop also have a nifty Control Panel called Adobe Gamma (Mac and Windows). The best way to learn about the influences of gamma is to take a few minutes and play with the settings. For the most part, if your images are calibrated to look good at gamma 2.00, they will be acceptable on both Mac and Windows platforms. However, to move from acceptable to very accurate, read on.

The multi-colored sweater

So let's take a look at how these variances in monitor settings can actually influence the appearance of a sweater for sale. The image in figure 2 represents the original JPEG posted on the web page, and figure 3 is one of many possible interpretations that our online shopper might see at home.

Figure 2. The original sweater.

Figure 3. One possible interpretation of that same sweater.
Images provided by Sonnetech, Ltd.

Depending on the reasons for purchase, the color variance may or may not be an issue for our shopper. However, given the costs associated with processing a returned item, the better the color, the fewer the returns. Also, the more our shopper trusts the images displayed on his or her monitor, the more likely he or she is to make future purchases.

Color profiles to the rescue

One solution is to embed color profiles, or tags, into the images so that home computer systems can read those tags and adjust the image accordingly. The International Color Consortium (ICC) has defined a standard method for creating a device description of color behavior. It's called an ICC profile. There are a number of calibration utilities available to measure displays and generate accurate ICC profiles. Many devices provide ICC profiles in their software packages. And now both Windows and Mac operating systems have color management built into the software. Windows calls their system ICM, and Macs use the ColorSync system. Their aim is the same—color accuracy.

These solutions work particularly well in design shops for maintaining color accuracy among devices and workstations. If you haven't investigated the resources built into your system, it's really worth exploring. But for many online buyers, however, fooling around with system level color calibration is probably at the bottom of their list of things to do.

But let's say that our sweater shopper has gone to the trouble to implement some sort of color management. Guess what? Browsers handle these profiles in different ways. Tell me you're shocked. Here's a brief look at the current state of affairs.

• Microsoft Internet Explorer Version 4 and greater for Windows can accept colorspace tags to correctly interpret an image profile. These tags help images retain original contrast, saturation, and hue as displayed from browser to browser. However, for this to work, our sweater shopper must first download the author profile for each image to his or her Windows\System\Color folder.
• Since version 4.01, IE for the Mac supports embedded ICC profiles in images if they're included by the author. This eliminates the profile download step at the cost of adding a few kilobytes to the image size.
• However, Internet Explorer for Windows does not recognize embedded profiles, and Internet Explorer for the Macintosh does not recognize the colorspace tags. This inconsistency requires developers to code two versions of each page.
• No shipping versions of Netscape or AOL browsers currently support any method of color correction, although Apple and Netscape/AOL are working together to implement profile support in Mozilla 5.0.

In short, developers are faced with creating different versions of their site, redirecting visitors to the appropriate versions, and creating a way for Windows-based folks to download authoring profiles. And, at the end of the day, this approach still leaves out AOL and Netscape browsers, as well as WebTV, NT and Unix users.

While you're thinking about color, here are a few related articles to add to your palette. • Coloring Tables Goes beyond basic table shading to show you how to color individual rows and cells. • Reinventing the Color Wheel Provides overview of web-safe colors. Since published in Sept. '97, some of the product info is dated, but the factual material remains very useful. •In Design School, They Promised No Math Is a terrific look at the differences between Mac and Windows color palette, why browser-safe colors are safe, and another view of the hexadecimal system. First published in Nov. 1997.

Tips for designers

That being said, there are new tools available to help you tame wild web color. Companies such as Pantone, Sonnetech, Ltd., and Apple have products targeted directly at solving this problem. We'll explore those offerings in the related article, "Tools for Color Management." While you're exploring those solutions, there are a few improvements you can make right now.

• Play with your gamma control panel and find the happy medium that best suits your needs. Then adjust all of your monitors to display that same setting. It's important to do this step before calibrating.
• Calibrate all of the devices in your shop to ensure consistency among workstations. Software calibration systems, such as ColorSync and Pantone Personal Color Calibrator (P2C2), are affordable and effective for web publishing. Excellent hardware solutions such as X-Rite's Monitor Optimizer are also available.
• Use image editors that support embedding ICC monitor profiles (also known as RGB profiles). A widely used imaged editor, Adobe Photoshop, supports those profiles.
• Save a high-quality version of your scans in a lossless, uncompressed format (Adobe's .PSD, Windows' .BMP, TIFF, etc.). By keeping these "master" files on hand, you can go back and recalibrate copies of those pictures as new tools become available without worrying about loss of image quality.
• Clearly state on your site the color management systems you use so visitors who wish to color sync with you understand their options.
• Test, test, test. Look at your site on different platforms and browsers to ensure the images are displaying the way you intend.

All is not lost

A little effort can go a long way toward better color management of your images on the Web. Try our tips and take a look at the third-party offerings. Soon your design team will no longer be singing the blues, and your customers won't be seeing various shades of red.

Tools for Color Management
Ready to get serious about accurate color? Here are a few solid tools to consider including Sonnetech, Ltd.'s True Internet Color.

How Color Works
A brief review of hexadecimal values, RGB triplets, and how they work together to display colors on-screen.

RELATED ARTICLES No Related Articles		TOP 5 ARTICLES No Top Articles.