Thursday 26 July 2012

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.


1 comment:

  1. Very interesting, Martin, and something for us to watch. I've just had a look at the three comparison images with Firefox 14.0.1 and Safari 5.1.7 on my Mac. All of them look OK. Adobe RGB looks "liveliest", but is probably the least accurate when I compare it to my own Raw images of the same vehicle and riders. The sRGB looks most like my originals (as you might expect in a web browser), but just for the way the colours look, not for accuracy, I'd certainly be happy with Adobe RGB.

    One other thing is that I now do just about all my export for the web via Lightroom. I find it convenient to make a flattened Tiff from a PSD masterfile, and then that just goes into the same export batch in Lightroom as everything else. (You probably don't even need to do this, as Lightroom seems to read PSDs fine).

    ReplyDelete