Colour Managed Web Browsing

Colour Managed Web Browsing

Is your browser using colour managmenet?

Do these two images look the same? If not (looks wildly different), then you are not viewing it with colour management enabled.

sRGB with profile includedcustomRGB with profile included

By the way, this is not testing for whether you browser is showing you accurate colours - just whether it is handling the colour profiles stored in images properly.

How did I make these two images? I opened the image in Photoshop and duplicated it. Saved one out as sRGB with profile included. Converted the other to a custom RGB (swapping the R G B xy primaries around) and saved it out with the new profile included.

If you have colour management on but want to see what the images look like without colour management here they are (I stripped their profiles from them). On my wide gamut monitor the left image has become more saturated and the right image has all it colours swapped around.

sRGB pixel levels but without including the profilecustomRGB level but without including the profile I used

Just note, these two have exactly the same pixel levels (Red Green Blue levels) as their associated image at the top of the page. All that has changed is that your system doesn't actually know what the colour levels represent, because I didn't give it the profiles, and now it has to guess or assume what the levels represent.

The problem

Until now (Dec 2007), when I have put my images on the web or view other peoples images on the internet my web browser was not showing me the colour indended by the author of the image. I've made the effort to colour manage my computer screen, and I use colour managed software to edit my photos. But the web browser was not colour managing the internet images and I have a newer monitor that has a wider gamut than older monitors. This means very frequently images appear too vibrant in colour on my screen and shadow detail is often changed when viewing internet images.

I realised this was a problem when I was voting for images on an internet photo competition. To counter this I made an effort to open each image in Photoshop to ensure I was seeing appropriate colour for the image.

Now that I can turn colour management on in the web browser I can view the internet in a colour managed way.

Turning on Colour Management in Firefox 3

There are a few simple steps to turn on colour management in Firefox 3. I used method 2 as described on this web page:

Firefox 3, released today, supports colour managed web browsing

As noted in the above web page there is a simple and quick test for your own system to see if your browser is colour managing images:

Is your system ICC Version 4 ready?

But what if the author/website doesn't tag their images?

There's not much you can do if the original author or the website you are viewing does not tag their images with the correct colour profile. You can only hope that they placed their image into the sRGB colourspace because that will be the most likely colourspace your colour managed browser will use to display the image. If you are not using a colour managed browser and the image is not tagged then the image will appear ok only if your screen is similar to the original author's screen.

Another Test/Demonstration

Here's an image that has been placed into three different colours spaces, then for each of these there is a tagged version and an untagged version. This is not about pleasing colour - it is about the behaviour of colour managed vs non colour managed web broswing.

In the table below:

If you are using a colourspace enabled webbrowser:

If you are not using a colourspace enabled webbrowser:

Tagged with Colourspace Untagged image
AdobeRGB AdobeRGB pixels / Tagged as such. AdobeRGB pixels / Not tagged with profile
sRGB sRGB pixels / Tagged as such. sRGB pixels / Not tagged with profile
ProPhoto ProPhoto pixels / Tagged as such. ProPhoto pixels / Not tagged with profile

Note: You would not normally expect ProPhoto images to be published to the web. I'm only ProPhoto here here because it is wide gamut and will show a dramatic difference. People who are aware of colour profiles will probably try to publish to the web with sRGB. Some cameras can save JPGs as AdobeRGB and authors may publish these to the web without realising the consequences. Many web graphics have been created without regard to colourspaces - using a colourmanaged webbrowser may lead to less pleasing web pages in this case.

In time as more larger gamut monitors become widespread and systems become colour managed it will be interesting to see if sRGB stays as the web standard.

What to do?

For more information

Technical update: Firefox 3.5 does not support LUT (look up table) in profiles

I've recently been using the excellent Argyll CMS colour management software, which has the capability of producing table based display profiles instead of the usual matrix based display profiles.

While playing around with these lut based profiles I noticed that my browser (Firefox 3.5.7) was oversaturating the colours and shadows were darker, Photoshop was fine. My screen is wide gamut (roughly AdobeRGB in gamut), so I assume the browser colour management was silently failing when using the lut only profile and reverting to sRGB as a display profile instead.

Apparently the developers of Firefox swapped to their own rewritten colour management engine with the release of Firefox 3.5 which dropped some functionality (like ICC v4 support). Maybe they also dropped table based profile support. Firefox seems to support matrix style profiles only.

It is not really a problem in general, because in general maxtrix style profiles are probably best for displays anyway.

Using the -aX option in Argyll colprof tool will give you a profile with both a matrix and a lut.