Why “dark mode” is more energy-efficient: How to calculate image energy-cost

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!

Comments

[Alex Longsdale]

Interesting post I did not realize it had an effect on energy usage thanks for writing this.

[intrnl]

As good as this is, I'm hoping that light mode continues to be important for accessibility. I don't think it's nice that we take it away just because it happens to save more energy, especially if light mode was the only way for someone to be able to browse the site.

[Mads Stoumann]

Agreed, it's a personal preference. Websites can offer both a light and a dark theme, based on the users prefers-color-scheme-setting.

[Wesley]

This makes me angry but it's true with how pixel luminacy works

[tankerguy1917]

Not only is dark mode more energy efficient, but it's easier on the eyes, at least it's easier on my eyes

[Cody Seibert]

It’s actually more difficult to read for me on dark mode. I think my eyes are broken.

[Florimond Manca]

Thanks for sharing. Beware they this only holds for OLED screens, which are a minority of the smartphone market (about half of sales, meaning much less “active” devices: onlinelibrary.wiley.com/doi/full/1...).

The majority of smartphones are still LCD. Eg I have an iPhone 6s and that’s got an LCD screen. An LCD screen is essentially a constant-brightness light panel (the backlight) behind a panel of liquid crystals. A dark LCD screen uses the same power as a light one because the backlight doesn’t change, only the crystals get “turned” in a way that lets a variable amount of light through.

In fact, dark screens in a bright environment might make you want to turn up the brightness to better see the details, meaning a bigger consumption in that case! Oops.

So this advice might unfortunately be counter-productive for most smartphone users. :(

Also, if you’ve got an LCD screen smartphone, do not use that as an excuse for buying a new OLED smartphone. Over 90% of environmental footprint of smartphones comes from manufacturing! You’d be doing far worse.

The best environment action you can take for your smartphone or any digital device really is to avoid manufacturing at all costs — make devices last longer, but second hand or refurbished, etc.

Cheers!

[Vincent Milum Jr]

So, a couple things here. Firstly, obviously, this is only true for OLEDs, and not LCDs (which are significantly more common)... but another thing: flat white actually isn't the most energy intense "color" on all OLED panels. This was a bit of a shock to me, too, recently. On my LG C9 panel, a flat white (or very close to it) image will actually go into a reduced power mode. However, colors like bright yellow will not go into that reduced power mode, and use significantly more power. So it really comes down to OLED panel image processing optimizations as well. If you spend a lot of time trying to game the system, but the system isn't static, it will be more of a perceived efficiency rather than actual efficiency.

[Mads Stoumann]

Interesting, thanks for sharing (Btw: I have the earlier B9!)

[Cody Seibert]

It's ok, drain my battery light mode. My eyes don't focus well using dark mode.

[Nathaniel]

This is great.

I think this is also true for CRT screens, maybe more so. Obviously as people say there's other more impactful ways to save energy. But the great thing about this is that people mostly prefer dark mode, it saves battery, and is easier on the eyes. So, even if the environmental part turns out to be a dud, it's still a win.

[Vincent Milum Jr]

This actually doesn't apply to CRTs. The vast majority of energy consumption in a CRT is due to the movement of the imaging beam, not the beam projection itself.

[Nathaniel]

I got that info from scientific america, not to say weather it's true or not:

CRT monitors, which until a few years ago were the predominant models among PC users, consume more power when a computer screen is white. To confirm this, Schindler measured the energy output of an 18-inch (45.7-centimeter) CRT monitor and found it used 102 watts when the screen was white but only 79 watts when the display was black.

[Mads Stoumann]

Interesting article! Thanks for sharing. However, I assume nobody use CRT-screens anymore?

[Nathaniel]

Earlier this year I forgot my laptop charger and ended up on an IBM thinkpad running windows XP, which lead me to doing a bit of research on this sort of thing.

People still use Internet Explorer 6. 0.01% of people, but that still is around 1 million people. I'm sure there must be some internet cafes and hostels using old computer monitors.

[Mads Stoumann]

You’re probably right!

[Mads Stoumann]

Thanks!

[manu]

Whoah. Cool!
I'm going to use this tool when I make my app!
Thanks for sharing!