Color Managed Web Browsing

Every time a new technology is invented it presents both benefits and problems to the adopters. This is not any different in the case of wide color gamut (ninety-plus percent of Adobe RGB) monitors. As more and more manufacturers join the elite group of EIZO and NEC an increasing number of people face the question: is my operating system and applications are mature enough to handle these “Adobe RGB” monitors? The answer is not a clear “yes”. Fortunately almost all of the applications in one’s photo editing and printing workflow are color management aware, thus they are able to handle these monitors corretly. But what about the Web? Photographers need a web site these days to market their work, and it is really important that clients see exactly what the photographer intented.

Back In 1996, Hewlett-Packard and Microsoft proposed a standard, called sRGB for specifying and handling color in operating systems and on the web. You can read the paper here. Up until lately, almost everybody ignored this standard, as the majority of the monitors were only able to display colors residing in the sRGB gamut. The invent of wide gamut monitors (such as the CG series from EIZO) with the ability to display 95-100% of the much bigger Adobe RGB color space, made evident the lack of color management support in browsers. When I first booted Windows XP and subsequently Mac OS X 10.5 on my EIZO CG241W, all the web pages looked horrible – with over-saturated colors.

In this article I’ll show how the currently available web browsers and active componenst support color management.

State of affairs

Part 3 of the aforementioned sRGB standard describes how one should implement a color managed web browser. The essence of this is the following:

  • All elements (images, text, background) should be in the sRGB color space. Text and background are assumed to be in sRGB (the proposed style sheet extension is not implemented even in color managed browsers).
  • If an image has no associated ICC profile, it is assumed to be in sRGB.
  • If an image has an associated ICC profile, it is converted to sRGB.
  • The entire page (which is in sRGB after the image conversion) should be converted to the monitor profile, if there’s one associated with the monitor. If the user’s machine has no monitor profile, the sRGB page is displayed preserving color numbers (which is equivalent to associating the monitor color profile with it).

How does current browsers implement this simple standard?

Ironically, even after Microsoft took a great share in creating the sRGB standard, Internet Explorer up to version 8 does not implement color management at all. Maybe because it would slow down page display by 10-15%, or just based on the fact that the majority of Windows users does not have a clue what this stuff is. Anyway, it should be an option which is turned off by default.

Opera took the IE approach – no color management support.

Apple’s Safari 3 and 4 is a mixed bag. It was the first browser that were advertised as “color managed”, but in truth it’s implementation is quite inconsistent and presents more problems that it solves. Yes, it treats images with embedded ICC profiles correctly – converting them to the display profile. But everyting else on the page – static elements like text and background as well as images with no associated profile – are assumed to be in the display color space. So on a wide-gamut monitor text and some images look horrible, while some other images are good. And if someone designs a web page with properly color managed images, there’s a mismatch between the image’s color managed background and the page’s unmagaged background. All in all, this browser only works if one uses ICC-tagged Adobe RGB images on a web page which is displayed on an sRGB monitor. In addition to this pretty weird behavior, color management cannot be turned off with a configuration option. I don’t know what Apple engineers had in mind…

The only correct implementation is in Firefox 3 and 3.5. It does exactly what Part 3 of the sRGB spec says. Well done! Moreover, color management is turned off by default on version 3 so non-color-management-aware users will also get what they expect. Unfortunately the default behavior in 3.5 is the same ill-behaved approach that Safari have.

Flash and Silverlight

Up until recently, active components were also lacking color management. This is slightly changed with version 10 of Adobe’s Flash player. Flash 10 in conjuction with ActiveScript 3 fully supports color managed display of images. But only with ActionScript 3. Gallery software written in ActionScript 2 will need some hacks. Unfortunately, Flash 10 is unable to detect the color management support in its host browser, which will cause some headache for web developers and inconvenience for users.

Silverlight 2 joins the happy family of products that does not know about the existence of color management.

This site

Having seen the diverse landscape of web technologies, one could wonder how we implemented color managed browsing support on this site.

All the images here are converted to sRGB as part of the web processing workflow. They are also tagged with sRGB.

Of course, these things only apply to you if you have a calibrated and profiled monitor. Otherwise everything will be displayed without color management.