The Browser's Eye
There are two related but separate aspects to worry about here: the browser must properly deal with an image's profile, and it must properly display the image on my monitor. For example, if I visit a page that has a JPEG image using, say, the Adobe RGB profile, the browser should be able to interpret the image as such, and it should then convert it to my monitor's profile so that it represents the intended colors and tones (as close as it is able to).
You might be right not to overly worry about such things: most images on the web are already in the sRGB profile (with or without the profile embedded—which is known as "untagged"), and most monitors in the world are designed/preset with that profile in mind. In other words, even if a browser didn't do anything, in many cases the result shouldn't be too far from the goal—a sRGB image displayed on a monitor covering the sRGB gamut doesn't need any special treatment. (Naturally, that's presuming the monitor has been calibrated, since even in the case of an entry-level monitor, calibration usually reveals a sizable mismatch.)
Things get ugly the more a monitor's gamut is far from sRGB—and as a photographer, you owe it to yourself to work on a calibrated, wide-gamut monitor. In this case, you absolutely need the browser to convert the images for it, since it can no longer presume that your monitor is a sRGB device. My main monitor, for example, covers 92% of the NTSC gamut (while sRGB covers roughly 72%), so the difference is massive.
The following tests attempt to show how four of the main web browsers deal with color management(1). We want to know how a browser reacts to different profiles (or no profile at all) and how it renders HTML elements versus images. Moreover, we want to know if it properly converts all of those to my display(2). The various parts of the illustration are as follows:
- Part of a photograph, sRGB color space, with the profile embedded
- Part of a photograph, sRGB color space, untagged (no profile embedded)
- Part of a photograph, ProPhoto color space, with the profile embedded
- An image of color swatches, sRGB color space, with the profile embedded
- Color swatches, drawn using the CSS property
Here we go:
Various implementations of color management in major browsers
This table synthesizes the results:
(ICC v2 & v4**)
(ICC v2 & v4)
Here's what I conclude, after this test:
- Firefox offers flawless color management. (*Enabling color management for untagged and rendered graphics requires the
gfx.color_management.modeparameter to be set to
1. **ICC v4 support can be enabled by switching the
true, but at the time of this writing, enabling it seems to break the display of certain PNG files. This is a rather moot point, since ICC v4 is hardly ever used anyway.)
- Safari is pretty good as well, but unfortunately doesn't handle untagged images properly. Since a lot of images on the web are untagged, this can be a problem. Intriguingly, it also doesn't handle the colors of HTML elements on the page properly (the same way it doesn't handle untagged images), so there is a mismatch between images (say a photographer's logo) and the colors of fonts, lines, etc.
- Explorer handles image color profiles perfectly, but doesn't convert to the monitor's profile, so it drops the ball. (You would think Explorer would know how to handle this on Windows, since both are made by Microsoft...)
- Chrome behaves just like Safari, handling tagged images properly, but not untagged images nor HTML elements.
There is an additional potential problem (or solution!) with color management that eludes the browsers' best attempts at doing the right thing. For the longest time, when you embedded images inside of a Flash presentation (a
.swf file), this would break color management—images would be displayed without taking into consideration your monitor's profile. That was true even if you were using a version of Firefox or Safari that would otherwise handle images correctly.
Since version 10 of Adobe Flash, provided that a certain snippet of code is included in the presentation, color management is fully supported. This means that even inside of Chrome, for example, images are properly displayed! That's a tricky one, because you need not only to build the Flash presentation properly, but the viewers must also be using the proper version of the add-on in their browser. (The Flash web galleries created by Lightroom 4, for example, provide color management in any browser.)
For me, the decision is simple: I will keep using Firefox, as I have for many years, and I would encourage you to do so as well (you will have to judge how much of a shift it causes in the colors and tones on your monitor).
Unfortunately, you cannot control what browser the visitors of your website will be using. Your best bet for proper color is to use Flash 10+ properly (although I would never, in a million years, for all sorts of reasons unrelated to color) or, at the very least, export your images to the sRGB color space and embed the profile.
Update — December 19, 2012
At long last, Chrome now supports color management since version 22, released in late September (well, at least as much as Safari does). This browser is now also a valid choice for photographers working on Windows computers.
The information in this post has been updated to reflect the change.
(1) These tests were run on the latest (as of this writing) Windows 7 versions of these browsers and might vary on other platforms.
(2) Naturally, it is impossible to show you how images would look on my display on your display, since the screenshots themselves have had to be converted down to sRGB to be displayed on this web page (and the point of a wide-gamut display is that it covers wider than sRGB). To circumvent this problem, I deliberately used colors that are somewhat muted so that you would have a chance to see, if not the correct colors in absolute terms, at least an idea of the difference between the various interpretations. (You'll have to take my word that all of the places where color management wasn't properly implemented, the result was far worse when viewed on my display than here.)