Use gamma everywhere

I wanted to write a long article about gamma, but instead I’ll just show you an animation:

For non-retina displays
For retina displays

The lines on the left are drawn without gamma. The lines on the right are drawn with a gamma of 2. Using gamma, the lines maintain their apparent thickness across pixel boundaries, and the diagonal lines appear smoother. Without gamma, by comparison, it looks pretty horrible. This is because by using gamma the algorithm works directly with light, emulating what would happen if you filmed the lines with a physical camera. And because so many common graphics operations like scale, opacity and blur, all work the same way, their results are visually wrong, if only by a little, unless you account for gamma.

For example, blur.

On the left the blur is done without gamma, and a noticeable amount of light is lost in high contrast areas. On the right a gamma of 2 is used, and 
all the light is retained.

But it’s not just about light. Here is a gradient from yellow to cyan:

The bottom gradient uses a gamma of 2 and looks more logical (the green above feels like a third color in the gradient).

It could backfire, though. Here is another gradient, this time from orange to sky blue:

Again the bottom gradient uses a gamma of 2, but now we get pink in the middle, while the no-gamma gradient above looks more conceptually correct.

Ideally, graphics software should allow us to control gamma with a slider at every point where it’s relevant, not with a global checkbox somewhere in the settings.

This is not the reality. But I think it’s a good idea to make an effort to use gamma as much as possible, even if it means occasionally having to stand on your head.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.