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!
Top comments (38)
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.
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!
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.
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.
This might be useful/interesting - just released info with some data.
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")
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!
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 😋🤣
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!
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!
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!
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.
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.
I got that info from scientific america, not to say weather it's true or not:
Interesting article! Thanks for sharing. However, I assume nobody use CRT-screens anymore?
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.
You’re probably right!
Thanks!
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!
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.
Interesting, thanks for sharing (Btw: I have the earlier B9!)
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.
Agreed, it's a personal preference. Websites can offer both a light and a dark theme, based on the users
prefers-color-scheme-setting.Aren't OLED screens in the tiny minority, though, overall?
The OLED-measure was a quote from Tom's book, I assume it's the same for LED.
It's ok, drain my battery light mode. My eyes don't focus well using dark mode.
Cool post, thanks for the share 👍
Thank you!
Great post. Guess very soon sustainable approach will become a top trend in UX and web designing.
Thanks! And I agree with your prediction!
Thanks for clarifying that
Some comments may only be visible to logged-in visitors. Sign in to view all comments.