Dull and Lifeless: web aRGB vs sRGB

Ever wondered why you have dull and lifeless hair images on the web when they are clean and full of colour on your PC/camera? It's most likely that the colour space is wrong (ie not sRGB).



Without going into the horrendous detail about colour spaces, all we need to know is that your images from your camera may be in colour space that is not compatible with the web - think of colour spaces as a way of defining how red/green/blue values look and how many shades of these values are available for viewing.

Well, the web works in sRGB but your camera (typical all DSLRs) may be capable of creating JPEG images in an colour space that provides more shades of colours (referred to as a wider gamut): enter adobeRGB (aRGB).

The problem is, if you make your (JPEG) pictures with aRGB as the colour space then you will need to convert these images to sRGB for display on the web otherwise you will find your images dull and lacking in saturation from your originals.

This statement is now not quite true as some browsers, firefox 3.5 upwards for example, respect embedded ICC jpeg profiles - more info can be found here along with a test image to test your browser capabilities

Consider the image at the top of this post - this is a composite of 2 screen grabs of images viewed in a ICM unware broswer; both images were converted to JPEG from the same Nikon RAW image. On the left is the image saved as an aRGB JPEG and on the right is the image saved as sRGB JPEG. Notice how the colours of aRGB image appears.

Now compare these images to a screen grab of the original RAW file as viewed in a RAW processor.



It is clear that the sRGB JPEG looks much closer to the RAW image as being displayed.

Note that this problem is only for JPEGs. RAW (ie Nikon NEF) files do not suffer from this - it is only the JPEGs that are generated from the RAWs that need to be in sRGB for a reasonable display on the web.


To solve is easy: use your photoshop of choice to save out as sRGB or use batch tools such as ImageMagick's convert tool to do it for you:

convert \
aRGB_image.jpg \
-quality 100 \
+profile icm \
-profile aRGB.icc \
-profile sRGB.icm \
sRGB_image.jpg

The aRGB profile can be obtained from Adobe whilst the sRGB profile is in the imagemagik distribution but also on your local machine.

A much more detailed coverage of displayig colour spaces correctly is available regex info with example images that include incorrectly (colour space) tagged jpegs and its effect in different browsers.