Preparing Images for the Web: Colour Profiles, sRGB and Adobe RGB

Overview

If you are used to preparing images in Adobe Photoshop or Adobe Lightroom using Adobe RGB or ProPhoto RGB colour profiles, you have probably been preparing images for consistent print quality.

To prepare your images for consistent display quality you’ll need to convert files to the sRGB colour profile.

What is a Colour Profile

The International Color Consortium (ICC) has a standard for an ICC Profile that defines the rules for managing colour on input devices (such as cameras and scanners) and output devices (such as printers and monitors).

Here are some key colour profiles you need to know about:

Adobe RGB and ProPhoto RGB: Colour profiles used in Adobe Photoshop and Adobe Photoshop Lightroom – primarily for preparing images for print.
sRGB: the colour profile used by most web browsers to display images on the web.

Mixing colour profiles can lead to washed out / dull images

If you take an image with either an Adobe RGB or ProPhoto RGB colour profile and display it in a web browser, the colours may look washed out or dull.

To avoid this occurring, convert the image to sRGB format before it is displayed in a web browser.

*Note: Safari has for some time supported the colour profile recorded for an image. Firefox 3.5.2 (Aug 09) introduced standard support for ICC colour profiles.

Converting the colour profile to sRGB

If you have images with the Adobe RGB or ProPhoto RGB colour profile, to convert them to sRGB:

In Adobe Photoshop – see detailed instructions and screenshots below
In Adobe Lightroom, choose File, Export and set the Colour Space to sRGB.

After you have converted the image to sRGB, check that the colours are the way you want them.

Exporting files with ICC Colour Profiles

In Photoshop you can choose to include or exclude the ICC colour profile metadata when you choose Save As to save an image for the web. Note this only affects whether the file is ‘tagged’ with the colour profile – the colours embedded in the image remain the same.

There are pros and cons to leaving the colour profile off. Leaving the ICC colour profile off can result is potentially a better option for images on the web:

the file size is slightly smaller.
you may avoid problems with untagged sRGB files being displayed differently to tagged sRGB files.

Part 2: sRGB Conversion Instructions

More information

If you want to find out more about colour profiles and the rationale for using sRGB for your web images, here are some links:

Web Browser Color Management Tutorial, by Greg Ballard
Embedding Tagging ICC Profiles in Web Images, by Greg Ballard
Digital Image Color Spaces by Jeffrey Friedl
Web Browser Color Management Guide and Color Management Test by Fabio Pili of Gear Oracle