Tech Tip #60: Does dark mode save battery?

Dark mode saves less battery than you think, at normal brightness.

Video created by explainapaper.com

The problem

Dark mode is often sold as an energy feature. On OLED phones it helps at full brightness, but at the 30-50% brightness most people use indoors the saving is small.

The fix you can use today

  • Offer dark mode (users like it) but don't claim big energy savings for it.
  • Spend your effort on bytes, JavaScript and background work first.
  • If you make energy claims, measure on real devices at real brightness.

Researchers at Purdue University found that dark mode saves little battery at normal screen brightness. GreenCode keeps advice like this in mind in its work.

Tools that help

  • Lighthouse: audits a page for total byte weight, unused JavaScript and CSS, image formats and offscreen images

How GreenCode helps

GreenCode helps tackle this by cutting page weight on its own website: static pages, WebP images, scripts only where they are used and purged styles took the home page's first view from 6,766 KB to 1,719 KB. More on this.

Tags

#mobile#ux#devices

Sources

Transcript

Dark mode saves less battery than you think, at normal brightness. Dark mode is often sold as a way to save energy. On phones with OLED screens, it does help at full brightness. But most of us keep our screens at thirty to fifty percent indoors. There, the saving is small. Researchers at Purdue University found that dark mode saves little battery at normal brightness. At full brightness, it saved thirty-nine to forty-seven percent of screen power. At thirty to fifty percent brightness, only three to nine percent. GreenCode keeps advice like this in mind in its work. Here is the fix you can use today. Offer dark mode, because people like it. But do not claim big energy savings for it. Spend your effort on page weight, scripts and background work first. Tools like Lighthouse find heavy pages, unused code and big images. And if you make an energy claim, measure it on real phones, at real brightness. GreenCode helps tackle this by cutting page weight on its own website. Its home page's first view went from six point eight megabytes to one point seven. That was GreenCode Tech Tip number sixty. Follow for the next tip, and find more on greencode.ai/tech-tips.

All GreenCode Tech Tips · All GreenCode videos

  • Tip #60
  • For CTOs and technical leads
  • Length 1:17
  • Category Web and front-end
GreenCode

Want this checked on your own system? Talk to the GreenCode team.

Get in touch