Original Post

Intro

https://developer.mozilla.org/En/ICC_color_correction_in_Firefox

Not all monitors are created equal. CRT monitors, LCDs, halogen-backed laptop displays and even paper all have differences in how they display colors. Images formatted as PNG or JPEG contain support for profiles which accurately describe how the color in an image should be transformed into another color space for accurate display on various output devices.

Firefox 3.5 will, by default, use color profiles if they are included in images on a page to transform from the image's original color space into the output device's color space. (A so-called "tagged" image.) This support was also available in Firefox 3, but we've made the color correction process about 5x faster in Firefox 3.5 so we were able to enable it without the associated performance penalties.

The Details

Browsers that don't support color correction will treat all colors as though they are in the output device's color space. This is a simple model to work with. As an example, the interpretation of #ff0000 is the same red everywhere. Unfortunately, this model doesn't allow you to get accurate reproduction of colors on different output devices. [ why? what happens to colors in this case? where is red not red? ]

Since we now color correct images that have been tagged with a color profile, authors now need to be careful about which images are tagged and what profile they are tagged with.

So how does it work?

Tagged images are converted from their source colorspace to a linear representation and from there to the output colorspace. If the output colorspace is an accurate representation of the actual output of the display, then the resulting colors should match what the author intended.

Unfortunately this makes things more complicated for authors. The colors of tagged images will not necessarily match colors specified in CSS. Because we only correct tagged images, if you want your image color to match CSS colors you need to leave the images untagged.

Here's an example of what this means:

[insert images here]

The image on the left is untagged and should match the border on all browsers. It should look like a solid purple box. The image on the right has been tagged with sRGB. When viewed in Firefox 3.5 or Safari, it should appear as a purple box surrounded by a purple border of a slightly different color unless your system profile is sRGB.

PNG imagess can be tagged in three different ways. First they can have an iCCP chunk that contains the associated ICC profile. Second they can be explicitly tagged as sRGB using a sRGB chunk. Finally, they can contain gAMA and cHRM chunks that describe the image's gamma and chromaticies. Using any of thse methods will cause Firefox to color correct the image.

You can remove all of the color correction chunks resulting in an untagged image using pngcrush: pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png Alternatively, you can use TweakPNG and delete the gAMA, cHRM, iCCP and sRGB chunks by hand.

Using untagged images should continue to work in the future when we color correct the entire page as we will assume untagged images and CSS colors are both in the sRGB colorspace.

[ This feels like a set of problems. Are we suggesting that people use only untagged images? Or is there a way to use tagged images but you just need to make sure that the source colorspace color ends up being matching CSS that's in the sRGB color space? Might be good to open with recommendations instead of a description. : Because we only correct tagged images and not CSS colors the only way to reliably make them match is for images to be untagged. The only time a tagged image will match CSS colors is when the user's display profile is the same as the image's profile.]

Caveats

Be aware, Firefox loads the output display profile when launched. If you move Firefox to a different monitor after starting it will still correct to the original profile and so the result may be incorrect. Safari, at least on OS X, also has this problem.

Also since, images are converted directly into the destination colorspace. Blending still happens in the output device's colorspace instead of linear space which can cause some incorrect results. We hope to fix this in the future when we have hardware accelerated color correction and can do all blending in linear space and only correct the result to the output colorspace.

[ What does this look like? How does someone know this is happening? : https://bugzilla.mozilla.org/show_bug.cgi?id=490964 has a good description of the problem ]

Finally, this page gives a good (if slightly dated) description of the issues involving gamma correcting PNG files in different browsers.

Compatibility

[ pasted from above: This change also means color correction now works the same in Firefox as it does in Safari. ]

[ Who else supports it? ]