EOS Digital Photographer's Resource

Buletproof your digital photographs for the Web using Photoshop CS2

When you post your digital photos to the Web, you probably want them look consistent no matter what platform/browser they are being opened on. The trick is to get to know just a few key facts about operating systems and browsers, and adjust to their idiosyncracies by using a color profile they will all recognize.

By now, you should know that digital photographs you're working on, wether they were saved as uncompressed TIFF files or compressed as JPEG, can and should (always!) have embedded color profiles. This is the data the applications use to decode how to render the photo on your display and how to print it out with correct colors. If the color profile does not match your display's (or printer's), it is the application's responsibility to convert the numbers so that the colors match the original as closely as possible.

As far as operating systems go, Mac OS X has a built in color management component called ColorSync which makes sure all applications treat the embedded color profiles with respect and actually do the number conversion. Windows (XP or any other version) has no such "universal" feature. Applications running under Windows are left to their own devices when it comes to handling images and their profiles - and most of them just choose to ignore the profiles and resort to rendering the image as it was using the generic / sRGB color space. To them, it doesn't matter if a JPEG insists it's mapped in Adobe RGB and carries the ICC profile as metadata in itself; the profile is ignored and the numbers are treated as it was generic RGB / sRGB. What is here unfortunate is that Windows web browsers behave like this.

So how different does an image look when it's mistreated this way? In simple terms, the wider the gamut of the photo's color space, the more desaturated or "washed out" the colors are when it's displayed by an application that ignores the profile. If you do the experiment yourself with a JPEG in Adobe RGB, which has a gamut of colors pretty wider than the standardized sRGB, opening one instance of the photo in a profile-aware application like Photoshop, and the other in any Windows web browser, you'll see the very noticeable difference in color saturation.

The solution to the problem is fairly simple: as a final step before saving JPEG files you plan to post to the web, make sure you convert their color profile to the Generic RGB profile or sRGB. OK, so you'll lose a small amount of tonal detail, but remember that you're using the photo for the Web; you probably even resized it to a much smaller size than the original. The important thing is that it will keep the color saturation and will do so on any browser, any platform. And if someone saves the image to their computer, it will still look the same in any image viewer.

To convert the photo's color profile using Photoshop, click Edit > Convert to Profile.

If you're wondering about conversion options listed in this dialog window, read the article Color Management: A Question of Intent by Bob Johnson.

After the conversion, you're ready to save your files. Remember to include the color profile in the JPEG by either ticking "Save ICC profile" in Photoshop's save dialog, or if you're using Save for Web tick the "ICC profile" in the Preset area. If you don't include it, every application will need to guess what color space is being used.

By keeping the image in the generic RGB / sRGB profile, you've ensured that Windows browsers and image viewers present the colors accurately even if they ignore the profile, while all the profile-aware aplications know exactly what they're dealing with.