Een grote energievreter van websites is media. Afbeeldingen en video. Die laatste hebben we niet. We gaan de voorpagina van de website energiezuiniger maken door ons te richten op de afbeeldingen die we hebben gebruikt. Uiteindelijk willen we daarmee onnodige co2 uitstoot vermijden.
Gedachte achter deze energie vermindering maatregel
Als je een webpagina bekijkt met je browser download je data. Een webpagina bestaat onder andere uit:
- een document (HTML pagina)
- afbeeldingen
- scripts (Javascript / ECMA script)
- opmaak code (Cascading Style Sheets of CSS)
- lettertypen
Dit zijn gewoon bestandjes die de browser download om daar een webpagina van te maken om weer te geven.
We gaan uit van deze simpele benadering voor onze website:
hoe kleiner de hoeveelheid data, des te energiezuiniger de website
We besparen daarmee op 3 fronten tegelijk (zie /leidraad)
Kleiner betekent dat er minder data in het datacenter hoeft te staan, minder data over het netwerk verzonden moet worden en het apparaat van de gebruiker over het algemeen minder te doen heeft.
Ons startpunt
Op het moment van schrijven is dit volgens websitecarbon.com:
Via digitalbeacon.co kun je zien hoe je website scoort, maar daar wordt ook een overzicht gegeven hoeveel data er verzonden wordt, ik zal dat vanaf nu benoemen met het ‘gewicht’ van de pagina.
Hier is te zien dat op onze startpagina 12 afbeeldingen te vinden zijn met in totaal 6,78 MB van de in totaal 7,54 MB. Dat is 90% van het gewicht van de pagina.
De oplettende lezer ziet in dit overzicht ten opzichte van het overzicht daarvoor dat er opeens 7,5 MB aan afbeeldingen zijn, daarbovenop 10 ipv 12.
Het verschil in gewicht heeft te maken dat de afbeeldingen in het eerste overzicht gecomprimeerd worden verzonden vanaf de server. Dat is een instelling aan de kant van de server om zo automatisch snelheidswinst te behalen. Op mijn computer zien we de bestanden zoals ze zijn.
Een van de ontbrekende bestanden is een zogenaamd ‘pixel’ afbeelding. Deze is te verwaarlozen voor nu. De andere afbeelding is de status-afbeelding van hoe de website scoort. Deze wordt na het schrijven van dit blog vervangen door een afbeelding van de nieuwe status. Een catch-22. 🙂
Aan de slag!
Volgens onze leidraad doorlopen we de 6 R-en. Voor onze focus op de afbeeldingen vandaag geven we aandacht aan Rethink, Refuse, Reduce en Reuse.
RETHINK
Hebben de afbeeldingen die we gebruiken een toegevoegde waarde en worden zo goed ingezet? Dit zal per situatie verschillen.
Twee voorbeelden:
- Sliders zijn UX technisch meestal geen goed idee. Wellicht kan er gekozen worden voor 1 kern boodschap / beeld.
- Een portfolio in de vorm van een foto album kan een zware oplossing zijn. Moeten de foto’s allemaal ineens geladen worden of kun je mensen met minder meer bieden? Wellicht biedt een usecase met een foto meer waarde? Verder kan er voor gekozen worden om afbeeldingen kleiner weer te geven.
REFUSE
Heb je elke afbeelding nodig? Bieden ze je bezoeker echt meerwaarde? Waar ligt de grens?
Een tip die ik voor die laatste vraag kan geven: werk met een pagina gewicht budget.
Hoe zwaar mag de pagina maximaal worden? Een tool die kan helpen hierbij is performancebudget.io
REDUCE
Zeker, we gaan herschalen, bijsnijden en efficiënt comprimeren.
Herschalen en bijsnijden
Onze team foto was oorspronkelijk 4,7 mb. Dat is een normaal gewicht voor een foto gemaakt door een smartphone. Maar veel te zwaar voor het doel op onze website. Zorg dat een foto de afmetingen heeft van waarin hij wordt weergegeven. Bijsnijden dus in het juiste formaat. Daar zijn tools voor en kan geautomatiseerd worden.
Ter illustratie nog even omdat het verwarrend kan zijn. De afbeelding wordt netjes op de webpagina weergegeven, maar de werkelijke grootte is aanzienlijk groter.
Bijsnijden of verkleinen maakt een groot verschil. Als je de breedte en hoogte halveert (2×2) dan maak je de afbeelding wel 4x zo klein.
Detail verwijderen
Een afbeelding kan aanzienlijk verkleind worden met behulp van compressie door detail te verwijderen.
Bijsnijden verwijdert detail. Maar je kunt een afbeelding zwart wit maken, een kader geven of bepaalde delen vervagen wat ik heb gedaan bij de teamfoto.
Hieronder twee foto’s met het resultaat. De eerste versie is 2,8 mb. In de afbeelding erna zie je dat de kleur iets is geoptimaliseerd en boven en onder is vervaagd. Je kunt het gebruiken als een diepte effect, maar dus ook prima om je afbeelding lichter te maken. De afbeelding weegt nu nog 2,3 mb.
Even een tussenstand: 36% less more dirty 🙂
Comprimeren
Een afbeelding comprimeren loont. Hierbij is wat achtergrond kennis handig van de verschillende formaten.
PNG: de minste compressie. Gebruik dit formaat alleen als je transparante pixels wilt gebruiken.
JPG of Jpeg: veel gebruikt en een prima compressie – mits goed ingezet. Bij dit formaat kun je zelf bepalen hoeveel je wilt comprimeren.
Bij compressjpeg.com kun je het verschil mooi vergelijken met het origineel.
WEBP: Hoogste compressie met acceptabele ondersteuning. Op caniuse.com kun je zien welke techniek door welke browsers wordt ondersteund. Zo is te zien dat WEBP op een mac alleen ondersteund wordt indien macOS 11 of later geïnstalleerd is. Zie caniuse.com/webp
Oppassen geblazen dus als je publiek niet de laatste techniek gebruikt.
De laatste is AVIF. Over het algemeen wordt de afbeelding nog lichter, maar dit nieuwe formaat wordt nog niet breed ondersteund. Leuk om in de gaten te houden, maar nog niet om in te zetten. Zie caniuse.com/avif
REUSE
Hergebruik vooral afbeeldingen ipv een nieuwe afbeelding te uploaden. Er is een afbeelding formaat bij uitstek geschikt voor hergebruik: SVG
SVG staat voor Scalable Vector Graphics. Dat is een formaat voor vector bestanden. Een illustratie met strakke lijnen en effen vlakken zou uitstekend als vector bestand geladen kunnen worden. Ons logo is hier bij uitstek geschikt voor. Het logo is 4kb groot en is een PNG omwille van de transparante pixels.
Ik heb het logo geladen in een illustratie programma en overgetrokken.
Van 3808 bytes naar 716 bytes maar met nog enkele grote voordelen:
- ondersteuning transparante achtergrond
- omdat het een vector bestand is is de afbeelding eindeloos schaalbaar
- herbruikbaar. SVG bestanden zijn eenvoudig manipuleerbaar, direct in de code. De afbeeldingen kunnen zelfs geanimeerd / interactief gemaakt worden.
Zo kun je met een regel code de kleur veranderen. Hetzelfde logo kan dus op een donkere als lichte achtergrond gebruikt worden.
Voorlopige eindstand
Na de doorgevoerde maatregelen is dit de voorlopige eindstand.
Onze set afbeeldingen hebben we lichter gemaakt, van 7,5 MB naar 0,4 MB
We hebben afbeeldingen bijgesneden, details verwijderd, kleiner gemaakt, gecomprimeerd en geconverteerd.
In het volgende blog gaan we kijken naar de scripts, dat is de tweede grootste energievreter van onze website.
Zelf aan de slag!
Bewustzijn alleen is niet genoeg. Onze wens is dat ontwikkelaars, webdesigners, opdrachtgevers en zelfbouwers standaard rekening gaan houden met het energieverbruik van een website of applicatie.
Veel optimalisatie taken zijn goed te automatiseren. Daar zijn de nodige tools voor, maar gaat te ver om dit te bespreken. Neem vooral contact met ons op mocht je specifieke vragen hebben – op het gebied van Digitale Duurzaamheid hebben we veel expertise en een uitgebreid netwerk waarmee we kunnen helpen.
De tools zoals gebruikt in het blog en een paar die ik zelf gebruik op mijn Mac deel ik met jullie.
Allen gratis, sommige open source, voor een laagdrempelig begin. Ik houd me aanbevolen voor meer interessante tools en tips. Deel ze met ons in de comments ajb.
Online afbeeldingen omzetten, comprimeren en bewerken
Shortpixel.com
Comprimeer en optimalizeer afbeeldingen.
Bulkresizephotos.com
Resize meerdere afbeeldingen ineens
online-convert.com
Converteer o.a. afbeeldingen naar het kleinst mogelijke formaat (webP)
TinyPNG.com
Smart Webp, PNG and JPEG compression
Energie / CO2 schatting meten
digitalbeacon.co
websitecarbon.com
ecograder.com
SVG afbeeldingen
Undraw.co
Gratis open source SVG afbeeldingen waarbij je de kleur kunt aanpassen, mooi voorbeeld van hergebruik. Ook gebruikt voor dit blog.
Heropatterns.com
Hetzelfde idee als undraw.co, maar dan voor achtergronden.
Software
Photoscape (Mac & Windows)
Voor het schrijven van dit blog had ik heel wat afbeeldingen die verkleind en geconverteerd moesten worden. Ik heb deze allemaal ineens de maximale breedte gegeven van dit blog, geconverteerd en gecomprimeerd naar WebP met de Batch functie van Photoscape.
De gratis versie is een verrassend uitgebreid foto bewerkingspakket.
Inkscape (Mac, Windows & Linux)
Inkscape gebruikte ik om ons logo over te trekken en er zo een vector bestand van te maken. Ook de afbeelding op /leidraad heb ik ermee gemaakt.
ImageOptim (Mac)
Comprimeert sterk afbeeldingen met een simpele drag and drop. Komt met een applicatie voor Mac (open source) maar ook met een online service en API.
Riot-optimizer.com (Windows)
Niet getest of gebruikt. Ik hoor graag ervaringen.