Use Linear Colorspaces for More Accurate Processing

Most image processing operations, like shrinking, blending, blurring, and anti-aliasing, are implemented assuming linear values (that is, the difference between a pixel with value 20 and 40 is the same as the difference between a pixel with value 80 and 100). But most of our images are not in a linear colorspace.

For more accurate image processing, convert the image to a linear colorspace.

For day to day work, this might not be strictly necessary. Designers already compensate for this to some extent, for example by adjusting the opacity of a blended layer based on the visual result. And linear operations have a larger effect on some images compared to others.

For example, there’s a significant difference when shrinking this photograph of Nagasaki:

Nagasaki, resized in sRGB

Resized in sRGB.

Nagasaki, resized in linear RGB

Resized in linear RGB. A lot more detail is preserved, especially in the darker parts of the image.

And while there is a difference between these images of Ritsurin garden, especially in the highlights in the wood, the overall contents of the image aren’t changed in the same way:

Ritsurin Garden, resized in sRGB

Resized in sRGB.

Ritsurin Garden, resized in linear RGB

Resized in linear RGB.

Explorations
The examples are more compelling when overlaid and toggleable; figure out a way to do that comparison on this page?