Gamma-Correct Image Upsampling

⚠️ Note: This works only on a screen with a 2x scale factor, such as on all recent Macs.

Source Image

Here's an image (credit: Jonas Berlin, source).

(It uses a hack to force it to be displayed at 1:1 pixel scale.)

It's displayed by using the same image file for both the 1x and 2x variants, like so:


<img srcset="gamma-1.0-or-2.2.png 1x, gamma-1.0-or-2.2.png 2x"
     src="http://www.ericbrasseur.org/gamma-1.0-or-2.2.png" />

(That's not how srcset is supposed to be used! Normally, you'd use an image of twice the resolution for the 2x image. I use it as a hack here to make sure that browsers don't scale up the image on retina screens.)

Gamma-Correct Upsampled Image

Here's the same image scaled up 2x, using software that does gamma-correct image upsampling. It also uses the hack mentioned above to show it at 1x zoom on retina screens:

How I made the gamma-correctly upsampled image

I used imageworsener, with this command:


./imagew -filter triangle -w 1024 -h 512 gamma-1.0-or-2.2.png out.png

This tells imageworsener to use a bilinear filter. It uses gamma-correct resampling by default. If you also pass -nogamma, you will get the behavior that browsers currently get you, see below.

How Your Browser Upsamples It

Here's the image how your browser displays it when just using <img src="gamma-1.0-or-2.2.png" /> (i.e. how it displays most images on the web):

Do Browsers Get This Right?

At the time of this writing (Oct 2025), none of the major browsers do gamma-correct image upsampling -- even though this is how the majority of the images on the web are displayed on retina screens, and even though they changed their image downsampling long ago to be gamma-correct.

Background

A while ago, Eric Brasseur did a detailed write-up on gamma-correct image sampling. It explains what gamma-correct image resampling is. It focused on downsampling. It looks like all browsers fixed their downsampling in response, but upsampling still has the same problem.

Effect on Dithering Demos

This is why articles about dithering that bother to deal with gamma correction tend to include a disclaimer along the lines "trust me, this is really better, even though it looks worse in your browser": The browser gamma-incorrectly upsamples the source and dithered images, and if you do gamma-incorecct dithering, the errors cancel out!