ImageOptim

Device-dependent color

Color such as rgb(255,0,0) alone is ambiguous, because it doesn't say 255 of what is it. How it will really look to the eye depends on monitor's brightness, saturation and other factors.

Color profiles are supposed to fix this. By embedding information in an image that says “my monitor displayed these colors that way” color profiles enable viewer's software to adjust the image to display the same way on their monitor.

The problem is that nobody (other than hardcore image editing professionals) calibrates their monitors correctly, and support for color profiles in most software is quite poor. In web browsers it ranges from completely non-existent to half-broken at best.

This futile exercise has a substantial cost — profiles can balloon an image by over 100KB, which may be many times more than the actual pixels in the image!

The solution

The solution to this mess is not to embed any profile at all. In that case a default profile will be assumed, which is going to be either sRGB with gamma 2.2 or viewer's monitor profile. Given that most monitors are roughly similar to sRGB with gamma 2.2 (give or take their poor calibration) that's the best bet to get colors that users expect, even if their systems can't manage colors correctly.

Color profiles are an issue only for 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 (and CSS/HTML, which aren't color-corrected in most browsers either).

Configuring software for accurate color

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

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

In either case in OS X's System Preferences → Displays → Color → click Calibrate…, set brightness as instructed, check Expert mode and adjust your monitor to use gamma 2.2.

Color vs ImageOptim

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

However, ImageOptim does not convert image pixels to sRGB color space. Rare images that aren't in sRGB color space will have their color changed during optimization (usually slightly change brightness or saturation). 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 keep color profile information in the image (disable EXIF and gamma chunk removal in preferences), but that's not recommended — it will leave images bloated and will give wrong colors in browsers that don't support color profiles.