DEV Community

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

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

Mads Stoumann
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
・2 min read

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:
Before

After:
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);
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

To get the average:

const avg = Math.ceil((r+g+b) / 3);
Enter fullscreen mode Exit fullscreen mode

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% 
Enter fullscreen mode Exit fullscreen mode


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!

Discussion (41)

Collapse
inhuofficial profile image
InHuOfficial • Edited

I love stuff like this, just imagine how much frustration from flat batteries we could save if the whole world went dark!

However there is something to consider from the environmental perspective that is even easier to do.

The average smart phone takes about 20 watts to charge fully. Lets assume that gives 6 hours continuous use and that the person using the phone spends an hour staring at your website that is a total of 3.333 watts of energy used by the phone during that time.

According to research I could find transferring 1GB of data uses about 5.12 kw of electricity.

So 1mb of data uses about 5.12 watts of energy.

As such if you can save about 650kb in page weight then one page load would save the same amount of energy that viewing a page for an hour would use.

All of this is assuming the screen uses 100% of the phones power - which it doesn't.

So lets be generous and assume a screen uses 50% of the battery, that means we only need to cut 325kb from our page size.

Now lets assume that we manage to half the energy usage on the screen by going to dark mode, that takes the total saving needed to 162.5kb (as we want to save the difference in energy used of dark vs light)

Now lets also be more realistic and assume someone doesn't stare at the same page for an hour but instead reads 10 pages on your site in an hour.

That means we need to but the page weight by only 16.25kb total.

So, in summary, spend 10 minutes shaving 16.25kb off your page size and you could save the planet :-P

The one thing that I realised in all of this is just how insanely efficient mobile phones are!

(numbers are rough and ready, I probably made mistakes!)

I mean if we all had dark mode websites and saved 16kb on each page load I would imagine that would add up to thousands of tonnes of CO2 saved.

Collapse
madsstoumann profile image
Mads Stoumann Author • Edited

There's so much more to energy-savings than images, of course.
Getting a low page-weight and caching assets should be the first thing to do.
Having said that, the huge savings for Google Maps in dark mode is significant!

And regarding saving the planet: I've just read Bill Gates' "How to avoid a climate disaster" and Bjorn Lomborgs "False Alarm" ... it's SO hard to determine what to believe and which measures we should take!

Collapse
johnkazer profile image
John Kazer

Take Lomborg with a pinch of salt. He thinks only the perfect action that solves everything is the only action worth taking. But this type of action doesn't exist. We have good options now, getting better by the day. Don't let the perfect be the enemy of progress.

Thread Thread
madsstoumann profile image
Mads Stoumann Author • Edited

He likes to provoke! ... but most of his suggestions (in the last section of “False Alarm”) are mostly the same as Bill Gates' suggestions in “How To Avoid A Climate Disaster”, so I guess we'll see some of them implemenented in the future.

Thread Thread
johnkazer profile image
John Kazer

This might be useful/interesting - just released info with some data.

Collapse
moopet profile image
Ben Sinclair

That research is a decade old now - transfer costs have presumably continued to improve since then.

It's also very awkward to define. They're trying to come up with some global average, but it clearly doesn't take the equivalent of three space heaters to move a movie from one hard drive to another. Numbers like 5KW aren't useful unless they have a time component (this is why you get charged in "kilowatt-hours")

Collapse
inhuofficial profile image
InHuOfficial • Edited

Yes the numbers vary wildly, websitecarbon.com/how-does-it-work/ gives 1.8kwH / GB - which means you need to save around 55kb a page - still easy for most sites.

And yes the numbers are imperfect but the idea of this was to show a) how little power screens actually use today (which I find astounding!) and b) show that saving kb is the way to be greener and the one that most people can do.

This doesn't take anything away from dark mode, I am currently using the site in dark mode and I am a big fan, but designing a site with darker colours to try and save the planet is not fruitful.

Also I love that Mads took the time to design an image calculator for working out the energy usage - I would love to see that integrated in a site like PSI as he said!

In fact I would love for Google to do it for a whole site including the background colours etc. It wouldn't be that hard to do either as they already gather screenshots for the site to calculate the “Speed Index” that are low resolution - so pixel sampling them in a similar way to how Mads did it could give the answer for "battery life saving" and "kwH used".

ps.s I always get confused on power usage units so thanks for pointing that out!

Collapse
madsstoumann profile image
Mads Stoumann Author • Edited

In general, "the cost of the internet" is difficult to measure, I guess.
The number 416.2twH pops up as "this is what the internet costs", but that's just the electricity to drive data-centers etc. There's also the cost of building data-centers (in terms of CO2 emissions, where 1kg cement === 1kg CO2) and the infastructure around it. And if we need to calculate the cost of downloading data to a device, we also need to measure the costs of our routers, modems, and ... it's ... difficult!

Thread Thread
inhuofficial profile image
InHuOfficial

Difficult is landing a rocket on the moon, calculating the actual cost of the internet is impossible I would say as we don't have enough data 😋🤣

Thread Thread
madsstoumann profile image
Mads Stoumann Author

Not to mention all the different energy-units! We're measuring emissions in CO2, but the energy that creates them in KwH/TwH, eV ... even calories! In meat-production, a cow needs to eat 6 calories to produce the meat-equivalent of 1 calorie for us to eat - but we measure the end-result in CO2 - phew!

Thread Thread
inhuofficial profile image
InHuOfficial

Haha - we should measure everything calories...I mean I don’t have a chance as I live in the UK so we measure food in calories, temperature in Celsius, oven temperatures in “Gas Marks”, fuel usage in miles per gallon....you get the idea!

Collapse
shadowfaxrodeo profile image
Nathaniel • Edited

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.

Collapse
darkain profile image
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.

Collapse
shadowfaxrodeo profile image
Nathaniel • Edited

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.

Thread Thread
madsstoumann profile image
Mads Stoumann Author

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

Thread Thread
shadowfaxrodeo profile image
Nathaniel • Edited

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.

Thread Thread
madsstoumann profile image
Mads Stoumann Author

You’re probably right!

Collapse
madsstoumann profile image
Mads Stoumann Author

Thanks!

Collapse
florimondmanca profile image
Florimond Manca • Edited

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!

Collapse
darkain profile image
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.

Collapse
madsstoumann profile image
Mads Stoumann Author

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

Collapse
intrnl profile image
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.

Collapse
madsstoumann profile image
Mads Stoumann Author

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

Collapse
codyseibert profile image
Cody Seibert

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

Collapse
moopet profile image
Ben Sinclair

Aren't OLED screens in the tiny minority, though, overall?

Collapse
madsstoumann profile image
Mads Stoumann Author • Edited

The OLED-measure was a quote from Tom's book, I assume it's the same for LED.

Collapse
bezpowell profile image
BezPowell

The power savings for dark mode only apply to OLED as it can turn off individual pixels. For any other type of LCD display (as far as I am aware) it makes no difference as the backlight is always on. forbes.com/sites/brookecrothers/20...

Dark mode is a nice improvement, but sadly is not applicable to the majority of devices at the moment.

Thread Thread
madsstoumann profile image
Mads Stoumann Author

Thanks for clarifying that

Collapse
daviddalbusco profile image
David Dal Busco

Cool post, thanks for the share 👍

Collapse
madsstoumann profile image
Mads Stoumann Author

Thank you!

Collapse
sergeyioffe profile image
Sergey Ioffe

Great post. Guess very soon sustainable approach will become a top trend in UX and web designing.

Collapse
madsstoumann profile image
Mads Stoumann Author

Thanks! And I agree with your prediction!

Collapse
tankerguy1917 profile image
tankerguy1917

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

Collapse
codyseibert profile image
Cody Seibert

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

Collapse
manuthecoder profile image
𝙼𝚊𝚗𝚞𝚃𝚑𝚎𝙲𝚘𝚍𝚎𝚛

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

Collapse
makeshift_name profile image
Alex Longsdale

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

Collapse
donnaken15 profile image
Wesley

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

Collapse
karlberdrindl profile image
karl-ber-drindl

The obligatory dark mode should be the first statement in the Convention on Human Rights.

Collapse
jaymz profile image
Jamison

This article was so fun to read and also extremely enlightening! Thank you! Ps. IMHO dark mode also just looks good!

Collapse
madsstoumann profile image
Mads Stoumann Author

Thank you!