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

If you are used to preparing images in Adobe Photoshop or Adobe Lightroom using Adobe RGB or ProPhoto RGB color 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 color profile.

What is a Color Profile

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

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

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

Mixing color profiles can lead to washed out / dull images

If you take an image with either an Adobe RGB or ProPhoto RGB color profile and display it on most* web browsers, the colors may look washed out or dull.

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

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

Converting the color profile to sRGB

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

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

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

Exporting files with ICC Color Profiles

In Photoshop you can choose to include or exclude the ICC color 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 color profile – the colors embedded in the image remain the same.

There are pros and cons to leaving the color profile off. On balance we recommend leaving the ICC color profile off:

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

More information

If you want to find out more about color 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

Detailed sRGB Conversion Instructions – Photoshop CS4

Open Image in photoshop
Click Edit -> Convert to Profile…

The current profile is listed in the “Source Space” field.

Change the “Destination Space” to sRGB IEC61966-2.1
Click OK.

Now save the image using either of these methods

1. Use the File -> Save As option to save the image as a JPEG, ensuring the ICC profile checkbox is ticked:

2. Use the File -> Save for Web & Devices option, using a JPEG preset:

Sizing images for the web

Once you have mastered color profiles you can pay attention to file sizing, specifically the dimensions of the image file and the size of the image file.

Metadata

Metadata is stored about images in EXIF, IPTC and XMP formats. If you are a photographer or want to find out more about metadata you should read this article: Wordpress and EXIF, IPTC and XMP Metadata in Images