When I read Tom Greenfords execellent book Sustainable Web Design, there was one fact that stuck with me in particular:

Running Google Maps in night mode reduced screen power draw by 63 percent.

Why is that?

When you think about it, it's quite simple:

Black is the most efficient color for OLED screens as the pixels are switched off, and white is the most energy intensive

So images use different amounts of energy, depending on the intensity of the red, green and blue lights in the pixel.

Tom goes on to show two examples of his website before and after an update:

Before:

After:

The latter use almost half the energy of the first one!

Unebelievable, right?

So – I sat out to create a small tool for calculating the energy-intensity of an image!

Draw the image onto a <canvas>

The <canvas>-tag has a really useful method: getImageData(), which will return a (very large!) array of all the pixels in an image – in chunks of 4: red, green, blue and alpha:

const imgData = ctx.getImageData(0, 0, width, height);

With this array, we can iterate and return an array of percentages:

const len = imgData.data.length / 4;

let r = 0, g = 0, b = 0, a = 0;
for (let i = 0; i < imgData.data.length; i += 4) {
  a = 255 / imgData.data[i + 3];
  r+= imgData.data[i] / 255 / a;
  g+= imgData.data[i + 1] / 255 / a;
  b+= imgData.data[i + 2] / 255 / a;
}
r = Math.floor((r/len) * 100);
g = Math.floor((g/len) * 100);
b = Math.floor((b/len) * 100);

return [r, g, b];

To get the average:

const avg = Math.ceil((r+g+b) / 3);

The tool is on Codepen – try uploading your own image to check the light/energy intensity.

The initial image is a pure rgb-color-image, with blue set to 127: rgb(0, 0, 127). That results in:

R: 0%
G: 0%
B: 49%
Average: 17% 

But … It's Not So Simple

While this tool will give you a hint about the energy-usage of an image, it's much more complex than that.

The photon energy differs for different wavelengths, with red being lowest and violet being highest.

A pixel contains approx. 10.000 photons, so I assume it's possible to calculate the eV cost of an image in a particular resolution – and then convert that number to Watt – but it's beyond my skills!

Conclusion

It would be nice, if a tool like Lighthouse could calculate the energy-effectiveness of a website – perhaps compared to a list of how much energy popular devices use, when all pixels are either black or white.

This way you could test how much battery drain you could prevent by designing darker websites!

Thanks for reading!