Skip to content

Wineries: Launch your wine club and grow recurring revenue

Learn More
Tectalic

Articles

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

Overview

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

To prepare images for consistent display quality on the web, convert them to the sRGB colour profile.

What is a colour profile?

The International Color Consortium (ICC) defines an ICC profile — a set of rules for managing colour across input devices (cameras, scanners) and output devices (printers, monitors).

The profiles worth knowing:

  • Adobe RGB and ProPhoto RGB — wide-gamut profiles used in Photoshop and Lightroom, mainly for print.
  • sRGB — the standard profile for displaying images on the web.

Mixing profiles causes washed-out images

If you take an image tagged with Adobe RGB or ProPhoto RGB and display it on the web, the colours can look flat, dull or washed out. Converting to sRGB before publishing avoids this. Modern browsers are colour-managed, but sRGB is still the safe, universal choice for web images.

Converting to sRGB

  • Photoshop: see the step-by-step in Part 2.
  • Lightroom: choose File → Export and set the Colour Space to sRGB.

After converting, check the colours look the way you intended.

Tagging the profile on export

When you export a JPEG, you can choose whether to embed (tag) the ICC profile. This only affects whether the file is labelled with the profile — the colours themselves don’t change. Leaving the sRGB tag on is the most predictable option for the modern web; the file is only marginally larger.

More information

Colour management is a deep topic. If you’d like to go further, search for guides on “web browser colour management” and “sRGB for web images” — the principles above cover the vast majority of cases.

Next: Part 2 — sRGB Conversion Instructions.