Why colour space is important on the web

I recently published images taken at Brands Hatch in some posts. I was very pleased with my first set of images, not least because I processed them entirely in Lightroom 4.1 and used the built-in Flickr publication service to post onto Flickr too - sweet.

The week before I had totally rebuilt my PC, reformatting and re-installing my applications, including Lightroom, careful to set the output colour space to sRGB. See Fig. 1

Fig. 1

When I came to process the next set of images I needed to do a little cloning and tidying up so I exported these to Photoshop (CS5), saved the JPEGs and uploaded to Flickr using the normal web site Flickr upload tool.

After a day or so I became aware that this latter set of images did not look right in certain situations, specifically when using Chrome and Safari browsers, the latter of which is the default on Apple's iPAD.

I was a bit perplexed for a while but after a few searches on the web it appeared that it was due a colour space issue, in that some browsers, including Chrome and Safari will ignore any embedded profile and just use sRGB to display. Thus, images with a different colour profile may be rendered incorrectly - indeed the images look very desaturated, particularly the reds. As Firefox is my browser of choice I was oblivious to this for a while.

I had set up Lightroom correctly to use sRGB in the external editor (CS5) so what had I missed? Well, good old Photoshop has its own defaults for colour management and I'd been a bit sloppy when re-installing it!

On checking my CS5 working space I found it was on ProPhoto RGB. Once I reset it to sRGB in the Colour Settings all the issues went away.

Fig. 2

There's a very good article on why you should probably use sRGB for all web-published images written by Michael Zhang that explains the principles.

For reference I've included the images below with different colour spaces so you can see how your browser will handle them.

Adobe RGB

sRGB

Prophoto RGB

On Firefox, the three images look identical. On my iPAD, the Adobe RGB version looks a little flat and the ProPhoto RGB version just looks plain wrong, with the reds appearing almost a bronze colour - not red at all.