Browser color management

Most browsers don't perform color management on photos you present on your website. Instead, they mostly assume that every photo is presented in the sRGB color space. Since most photos are ,,living'' in sRGB, this doesn't really matter.

But what would happen if you'd publish a photo on your website are living in another color space? Perhaps AdobeRGB, or in the even wider ProPhoto color space?

Without support for color management, a browser will still assume the photo is published in sRGB, even when it's not. The visual result would be a shift of colors, or a lack of contrast.

To demonstrate what happens, I've prepared four versions of the same photograph. Two are in sRGB, two in ProPhoto. For each color space, one photograph contains a proper ICC profile and one does not. To see the difference, move your mouse cursor over each photograph. I'll explain below what you see, or what you don't see.

sRGB

ProPhoto

The photos above should (if you don't hover your mouse cursor over them) look nearly the same. The top photo uses the sRGB colorspace, the photo below it uses the ProPhoto colorspace. Since the photos are properly tagged as such, in an ideal world - the one where browsers support color management - they should look similar. However, chances are they don't. That's because most browsers, incorrectly, automatically assume sRGB as the standard colorspace. Because ProPhoto is ,,wider'' than sRGB, this results is a lack of saturation and contrast.

Why does that happen? Imagine that ProPhoto supports 100 levels of ,,blue'', and sRGB supports 50 levels. A ,,half blue'' in ProPhoto is represented by level 50. However, level 50 in sRGB is 100% ,,blue''. Because of this, a ProPhoto photo represented in sRGB would never be able to appear more ,,blue'' than ,,half blue'', resulting in a lack of saturation.

And that's the whole point of color management: representing those 100 PhoPhoto levels within the 50 levels that sRGB supports, by scaling each color value to make it fit within those 50 levels! Alas, the only browser I know of which manages colors is Mac OS X's Safari, although probably all WebKit-based browsers will support it as well. But more common browsers like Microsoft Internet Explorer and FireFox don't manage colors (Firefox 3 can support it, but it is disabled by default - on my Mac, turning it on causes all sorts of color issues though, so I guess there's a reason why it's turned off).

Conclusion

If you want to publish your photos on a website, make sure they are in sRGB format. If you use a different working space, remember to convert your photos to sRGB before you export them, or you'll end up with all sorts of disappointing color-, saturation- and contrastshifts.

More information

• The Wikipedia page on color management
• This page shows quite clearly what might happen when a browser doesn't support color management.