Een close-up van de pixels op een beeldscherm

Kleur en energieverbruik

Yvin Hei | 4 min lezen

Het gebruik van kleur op onze websites heeft een bepaalde impact op de visuele ervaring van onze (eind)gebruikers. Natuurlijk willen we op een of andere manier de aandacht trekken, vaak gepaard met de mooiste afbeeldingen, foto’s en kleuren in onze huisstijl en digitale uitingen. Maar juist het gebruik van kleur – of juist geen kleur – kan een enorme invloed hebben op het energieverbruik van onze websites.

Energieverbruik van een beeldscherm

Zoals je wellicht weet, bestaat een beeldscherm uit pixels. Kleine puntjes die los van elkaar licht kunnen geven in de kleuren rood, groen en blauw. Een combinatie van die drie kleuren bepaald de kleur die we zien op de monitor. Alle lichtpuntjes aan geeft een witte pixel weer en alles uit juist zwart. Door de rode, groene en blauwe puntjes te ‘mengen’ ontstaan vrijwel alle andere kleuren uit de regenboog.

Het is niet heel lastig voor te stellen dat zodra alle lichtpuntjes op hun felst branden, deze ook meer energie nodig hebben dan als ze allemaal uit staan. In hedendaagse apparaten (zoals veel laptops, tv’s en vooral ook mobiele telefoons) worden OLED-schermen gebruikt; mini-LED’s als lichtpuntjes. Op zich is LED al een hele verbetering ten opzicht van de ‘oude’ LCD- en CRT-techniek als het gaat om stroomverbruik, maar nog steeds geldt: hoe minder kleur en helderheid, des te minder energie een scherm verbruikt.

Dark mode

De afgelopen jaren is de zogeheten ‘dark mode’ een bekend fenomeen geworden. Oorspronkelijk geïntroduceerd om beeldschermen minder licht af te laten geven in donkere omgevingen om zo onze ogen meer rust te geven. Tegenwoordig is dark mode voor veel gebruikers een standaard gebruiksmodus.

Google deed onderzoek naar het energieverbruik van schermen in combinatie met hun eigen apps. Chris Banes van het Android-team toont in een presentatie (link naar Youtube) een aantal interessante bevindingen:

  • Google Maps verbruikt in dark mode tot wel 63% minder schermenergie.
  • Zwarte pixels verbruiken duidelijk minder energie dan witte.
  • De kleur blauw is het meest energie-intensief; blauwe LED’s verbruiken meer stroom dan de rode en de groene.
  • LCD-schermen verbruiken niet minder energie bij donkere kleuren, dit geldt dus alleen voor OLED.
Een screenshot uit het onderzoek waarin Google uitzocht hoeveel energie hun apps gebruiken in dark mode.
Een screenshot uit het onderzoek waarin Google uitzocht hoeveel energie hun apps gebruiken in dark mode.

Afbeeldingen en foto’s

Ook afbeeldingen en foto’s bevatten in de meeste gevallen kleur. Bovenstaande is dus ook van toepassing op afbeeldingen en foto’s. En video uiteraard. Een foto, als voorbeeld, bestaat uit pixels en iedere pixel staat voor een bepaalde hoeveelheid energie die nodig is om de afbeeldingen weer te geven op een beeldscherm. Daarnaast is een foto in vrijwel alle gevallen gecomprimeerd (als bijvoorbeeld een jpeg-, webp- of gif- bestand). Dat comprimeren helpt de bestandsgrootte enorm, met andere woorden: de foto bevat minder data en zal sneller laden op de website. Maar zodra een foto meerdere verschillende kleuren bevat, loopt ook meteen de bestandsgrootte op. Dat komt door de manier waarop compressie over het algemeen werkt.

Moeten we dan alleen nog maar zwart-foto’s gaan gebruiken online? Mag wel, maar hoeft natuurlijk niet. Zodra je je bewust bent van het feit dat veel kleur minder energie- en datazuinig is, kun je daar natuurlijk rekening mee houden.

Het is met bijvoorbeeld CSS (codetaal voor het weergeven en manipuleren van de manier waarop websites eruit zien) mogelijk om zogeheten ‘blend modes’ toe te passen. Het daarmee mogelijk om het bereik aan kleur terug te brengen in afbeeldingen, foto’s en zelfs video. Monochroom is daar een voorbeeld van. Let er wel op dat je het aantal blend modes niet te veel toepast, dit kan averechts werken, omdat de browser al deze berekeningen moet uitvoeren. Wat weer resulteert in een hoger energieverbruik van het apparaat zelf.

Ontwerpen voor schermen

Het is dus zeker zinvol om te kijken naar het kleurgebruik op een website of in een app. In de afgelopen jaren is de kleur blauw bijvoorbeeld een veelgebruikte kleur geweest op internet. Het straalt namelijk rust en vertrouwen uit. Maar, blijkbaar is deze kleur het minst energiezuinig. Om een duurzame website te ontwikkelen is het verstandig om ook rekening te houden met het te gebruiken kleurenpalet. Probeer blauwe tinten te vermijden en ga voor donker(der) waar mogelijk. En probeer afbeeldingen zo goed mogelijk te comprimeren. Hiermee help je je gebruikers door ze minder energie te laten verbruiken en dus een langere batterijduur te hebben op hun apparaten.

Meer updates

Over Yvin

Yvin werkt graag samen met andere creatieven, strategen en professionals. Hij zet zich in om de digitale wereld een stuk mooier te maken, zowel om naar te kijken als de technische kant ervan. In projecten is hij zowel opdrachtgever, uitvoerder als eindgebruiker en betrekt iedereen bij het proces.

Stuur Yvin een e-mail


duurzaam, ontwerp
foto door Michael Maasen

Lees verder

Neem contact op

Ook een digitale uitdaging of duurzaam idee?

Heb jij een vraag, een tof idee of heb je gewoon zin in een bak koffie? Wij komen graag in contact met bedrijven en mensen die een mooiere wereld willen, ook online.

Bel ons of stuur een e-mail. We maken graag een afspraak! Je kunt ons ook volgen op Linkedin en Instagram.

Vraag een impact scan aan!