Device-dependent color

How “raw” RGB colors really look like depends on capabilities of the monitor they are viewed on. Some monitors display more saturated colors, some monitors are brighter, etc.

Color profiles are supposed to help even out the differences. When a profile is embedded in an image, it describes in exact physical terms how the colors are supposed to look. Then, the software that displays the image — if it knows exact physical capabilities of the monitor — may adjust image colors to display according to the color profile.

That's the theory. In practice:

  • The majority of typical consumer monitors have a color profile similar to the standard sRGB profile, and can't display any “better” profiles.
  • Almost all images, especially on the Web, were designed to be displayed in the sRGB color profile. When displayed correctly, they look the same on a high-end “wide gamut” monitor as on an average sRGB monitor.
  • Not all browsers and image viewers support color profiles correctly. While basic support has improved in recent years, there are still cases where it's buggy or misconfigured, so it can't be relied upon for anything fancy.

As a result, for most users, embedded color profiles provide no value. Even for the users of high-end monitors there's rarely any benefit, because most images don't contain extremely saturated colors that require a special profile.

However, the use of embedded color profiles has a substantial cost in file size — the profiles can balloon an image by over 100KB! For small images that may multiply their file size.

The solution

Save images in the sRGB profile with gamma 2.2, but don't embed any profile in the image. That's the most compatible and most efficient solution.

Software that supports color profiles will assume that images without an embedded profile are in the sRGB profile. Software that doesn't support color profiles will use monitor's profile, which is most likely to be sRGB as well.

Color profiles can be embedded only in PNG and JPEG. GIF images don't have any color correction capability. Stripping color metadata from PNG and JPEG makes their colors consistent with GIF as well as with colors in CSS/HTML.

Configuring software for accurate color

If you're using color-profile-aware software, make sure to configure it to work in the sRGB color space. In Photoshop use Convert to Profile… and choose sRGB IEC61966. When “Saving for Web” check the Convert to sRGB option.

If you have a wide-gamut monitor, you will need to configure your operating system to use the appropriate profile for your monitor (and ideally calibrate it with a hardware colorimeter). Use sRGB for images, but don't use an sRGB profile for wide-gamut monitors' display profile!

Color vs ImageOptim

By default, ImageOptim removes all color profiles. It's an obvious win for file size, and a good way to get consistent colors across different browsers, operating systems and devices.

However, ImageOptim does not convert image pixels to the sRGB color space, because that's a slightly lossy operation. The color of the rare images that aren't in the sRGB color space will fade after the optimization (usually become a bit less saturated). If you're using images with specialized color profiles or non-RGB images (e.g., CMYK JPEG), you should convert them to sRGB first.

The alternative is to disable EXIF and gamma chunk removal in ImageOptim's Preferences and keep the color profile data in the image, but that's not recommended: it will leave images bloated, and will give faded out colors in browsers that don't support color profiles.