Color Managed Browsing on the Mac

Three years ago I had published an article on this subject. I was just curious to see how much has been changed during all these years. In essence: not much. Most of the web browser screw up color for you.

But let’s examine it in detail. As you can read in my aforementioned article, Section 3 of the sRGB standard dictates the following color handling practices for web browsers:

  1. 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).
  2. If an image has no associated ICC profile, it is assumed to be in sRGB.
  3. If an image has an associated ICC profile, it is converted to sRGB.
  4. 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).

I usually do two test to examine a browser’s color handling. First, is what I call the quick LuLa test. The Luminous Landscape is a site I visit a lot. The site has a pleasing green sidebar, which looks awfully over-saturated on a wide-gamut monitor (such as the EIZO CG241W I’m using) when the browser does something wrong in its color handling code.  So actually I could assess a browser’s color management code visually just by visiting the LuLa.

Left: Safari 6.0 – Right: Firefox 14.0.1

The above image illustrates what happens if a browser handles images correctly, but forgets about all other elements – such as background color. I put Safari and Firefox side by side, made a screenshot on my EIZO, and converted the image back to sRGB. Believe me, the sRGB conversion reduces the over-saturation a LOT. The above is just to illustrate the concept.

The second is evaluating tagged image handling with this web page.

I tested four mainstream browsers on OS X 10.8 Mountain Lion using a calibrated and profiled EIZO CG241W monitor (calibration and profiling was done using basICColor display 5). I have not tested these browsers on Windows, because I’m not using them. This is also the case with Internet Explorer. No Mac version – no test.

Browser Color Management support on the Mac
 
(1) With gfx.color_management.mode set to 1 in about:config.

The results are disappointing. None of these browsers are able to display color correctly out of the box. Firefox by default emulates Safari’s incorrect behavior, but there’s hope: you can switch it over to handle color correctly (using the gfx.color_management.mode configuration variable). And with this switch, Firefox is still the only of the four that does things as they are described in the sRGB standard!

Let’s see where they screw up:

Chrome – By not implementing color management at all.

Firefox – By not making the correct behavior the default. Guys, don’t care about how Apple can’t do it right, you can!

Opera – This is an interesting beast. It does points 1 and 2 correctly (assumes everything in sRGB), but completely ignores profiles in tagged images. This is one more reason why you shouldn’t add non-sRGB images to your website.

Safari – I can’t believe Apple still can’t make it right. Safari handles points 2 and 3 correctly, but completely ignores non-image elements. This way one has no chance to make his/her web site look good on wide gamut Mac monitors. I know, Apple makes only mediocre sRGB displays, but they target imaging professionals where color is at utmost importance.

So the bottom line is the same as it was three years ago: if you happen to have a wide gamut monitor, you should use Firefox (at least on the Mac and from the four mainstream browsers).

A message to my fellow colleagues: It irritates the hell out of me that you still can’t make it right after so many years. Peek into the Firefox codebase or just read the f(antastic) sRGB standard! If you still can’t understand what’s wrong with your product, I’m more than happy to sell you consulting hours… 😉 I still think that color management is fairly straightforward if done right, and it’s only hard for users to understand because you make mistakes like this.

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.

Resources