Getting Consistent Color on the Web (Windows)

Every photographer's bane: you carefully adjust your pictures to look great and publish them with pride to your favorite photo sharing site. Then you're appalled to find them looking more reddish and saturated in most browsers.


Regardless of your current browser, you should see a difference between the two slices above (if not, your monitor has serious color issues and you can stop reading here).  The image is a single screenshot showing the same image as rendered in Firefox 3 (left) and Chrome (right) on Windows Vista.  I could just as well have compared Safari and Internet Explorer and you'd see the same difference.

The point isn't whether one is better than the other, the point is that they are different.  The browser on the left is interpreting the ICC v2 color profile embedded in the image, while the browser on the right is ignoring it.   For that matter many other programs, such as Picasa, also ignore color profiles.

I'm not using an "unusual" color profile such as Adobe RGB in my image. I'm using the accepted internet standard profile sRGB (IEC 61966-2.1) and have been under the impression that browsers render using this profile by default.  So why are the results different?

Chris MacAskill of SmugMug once advocated saving images without embedded profiles in order to get consistent results across browsers.  But that wouldn't actually solve my problem, it just makes all browsers consistently "wrong" relative to the colors I saw when editing the photo.

What I need is consistency between my photo editing software and the universe of web browsers.

My Problem: Incorrect WCS Settings

Eventually I discovered a problem in my Windows Color System (WCS) settings (Control Panel::Color Management).  At one time I had set up my system workflow for Adobe RGB, which included setting the WCS default device profile.

Don't do that.  Instead set your default device profile to sRGB IEC61966-2.1 like this:

You can (and should) still use your calibrated monitor profile.  For a while I was afraid that I would have to set it to the default sRGB profile as well, but no:

You shouldn't have to restart your computer, but you will need to restart color managed applications, such as PhotoShop, Safari and Firefox before you can see the change.

Results

Here's a comparison of the image after the change. The left-most image is PhotoShop, showing the PSD file rendered in sRGB 8-bit color.  I saved that image as an 80% JPEG with the embedded sRGB profile, then displayed it in various browsers.   These look really close to me.

From left to right: (1) PhotoShop (PSD file, sRGB 8-bit), (2) Safari (color managed), (3) Chrome (not color managed), (4) IE 8 (not color managed).

I wondered just how close they really were so did another screen capture of just the ear at 100% in all four programs.  Then using PhotoShop I compared the average RGB values of an 11x11 region:

The results ...

PhotoShop (original)	rgb(220,176,154)
Safari (managed)	rgb(220,176,154)
Chrome (unmanaged)	rgb(221,177,156)
IE 8 (unmanaged)	rgb(221,177,156)

Very close indeed.

If You're Interested ...
The International Color Consortium (ICC) has a handy web page for checking whether your browser supports color management and, if so, whether it supports v4 or just v2.

Chris MacAskill of SmugMug has written several popular blog posts on this subject.  His conclusion that embedded color profiles are spawn-of-devil may be controversial, but it does represent some practical thinking in the real world of publishing photos on the web.

• "SmugMug Alters My Colors - Updated" (May 2008)
• "SmugMug Alters My Colors" (June 2005)

On the separate-but-related topic of color gamuts, SmugMug also has a clearly written explanation of sRGB versus Adobe RGB that I found highly informative.  For even more details see this tutorial at Cambridge In Color. I used to think Adobe RGB was superior for the wider gamut, but not only is there little to gain, but the limited precision of 8-bit color channels will result in greater quantization errors.  In short, always use sRGB for 8-bit color.

Microsoft's Windows Color System (WCS) was introduced with Vista and provides a lot more control than older versions of Windows.  But it's easy to get it slightly wrong, as I did.