Sla afbeeldingen slim op (en bespaar CO₂)
'Een afbeelding zegt meer dan 1000 woorden'
Ja… Maar eenafbeelding is vaak ook meer dan 1000 woorden groot in file size. Gemiddeld zijn afbeeldingen verantwoordelijk voor 57,4% van de CO₂-uitstoot van een website 🫨.
Wil je dus met een kleine actie een groot verschil maken? Begin dan bij je afbeeldingen. In dit artikel leggen we je uit hoe je ze kleiner maakt, waardoor je site sneller laadt en je je digitale uitstoot verlaagd.
De meest gemaakte fouten
Afbeeldingen zijn vaak veel groter dan nodig. Hoe dat komt?
- 1. Ze zijn te groot in pixels
Bijvoorbeeld: je uploadt een afbeelding van 5000 pixels breed, terwijl die op je site maar 1200 pixels breed wordt weergegeven. Toch moet elke bezoeker die volledige 5000px laden. Dat is onnodige data (en uitstoot). - 2. Ze zijn opgeslagen in een verouderd formaat
Een afbeelding in PNG-formaat kan tot wel 10× groter zijn dan dezelfde afbeelding als JPG of WebP.
Het goede nieuws: dit is allemaal makkelijk op te lossen.
Pixelgrootte aanpassen
Een paar pixels minder kunnen een wereld van verschil maken. Om dat te laten zien heb ik een hoge resolutie foto van een kitten gedownload en opgeslagen in een webgeschikte resolutie. Dat leverde een veel kleiner bestand op — zonder zichtbaar kwaliteitsverlies.
Zo pas je de grootte aan in Photoshop:
- Ga naar Image > Image Size…
- Vul een nieuwe breedte in (bijvoorbeeld 800 px)
- Zorg dat ‘Resample’ is aangevinkt
- Klik op OK
- Sla je afbeelding op
Voorbeeld: een plaatje van een kitten (4300 MB) werd na opslaan in de juiste maat en kwaliteit 270 kB. Dat is 16 x kleiner!
Tip: Geen photoshop? Je kunt hier ook gratis online tools squoosh of bulk resize images voor gebruiken.
2. Het juiste bestandsformaat kiezen
Er zijn veel bestandsformaten, maar ze zijn niet allemaal geschikt voor het web:
- JPG: klassiek, ideaal voor foto's. Klein bestand bij juiste instellingen.
- PNG: ondersteunt transparantie, maar maakt zware bestanden. Beter vermijden voor gewone foto's.
- TIFF: gemaakt voor drukwerk. Zeer groot. Niet geschikt voor websites.
- WebP: modern, lichtgewicht en ondersteunt transparantie. Perfect voor het web.
- AVIF: nóg beter gecomprimeerd dan WebP, maar (nog) niet overal ondersteund.
- SVG: perfect voor vectorafbeeldingen zoals iconen of illustraties. Superscherp én superklein.
Advies: gebruik WebP voor foto's en algemene afbeeldingen, en combineer met SVG voor grafische elementen. Dan zit je goed.
Voorbeeld: hetzelfde plaatje opgeslagen in verschillende formaten geeft verschillende file-sizes.
💡 Wist je dat YouTube hun pagina’s 10% sneller maakte door thumbnails om te zetten naar WebP? En dat Facebook 80% opslagruimte bespaarde door PNG’s te vervangen door WebP?
Afbeeldingen opslaan als webp met Photoshop
Een goede compressie maakt je bestand kleiner zonder zichtbaar kwaliteitsverlies.
Zo exporteer je een afbeelding in Photoshop:
- Ga naar File > Export > Save for Web (Legacy)
- Kies het bestandsformaat WebP
- Stel de kwaliteit in op 70–80% – perfect voor webgebruik
Voorbeeld: de kitten-JPG (270 kB) werd na optimalisatie als WebP nog maar 128 kB — meer dan 50% kleiner, zonder kwaliteitsverlies.
Online tools voor export en compressie
Er zijn online meerdere tools te vinden die (vaak gratis) helpen bij het comprimeren en exporteren van afbeeldingen. Dit zijn twee van onze favorieten:
- Bulk Resize Photos Upload meerdere afbeeldingen tegelijk, stel de langste zijde in (800px is vaak groot genoeg), kies WebP en stel de kwaliteit in op max 80%.
- Squoosh Sleep je afbeelding in de tool, pas formaat én compressie aan, en vergelijk direct de originele en geoptimaliseerde versie.
WordPress plugins
Gebruik je WordPress? Dan zijn er handige plugins die automatisch je afbeeldingen verkleinen én converteren naar moderne formaten:
Deze plugins comprimeren én zetten je afbeeldingen automatisch om naar WebP.
Niet vergeten:
- Verklein vóór je uploadt: voorkom dat gigantische afbeeldingen worden ingeladen.
- Gebruik WebP voor de beste balans tussen bestandsgrootte, kwaliteit en browserondersteuning.
- Ruim op: verwijder oude, niet-geoptimaliseerde afbeeldingen van je server.
Hoe kleiner de afbeelding, hoe groter het effect.
Afbeeldingen optimaliseren is een van de snelste en meest impactvolle manieren om je website groener, sneller en efficiënter te maken. Elke geoptimaliseerde afbeelding bespaart data, tijd én uitstoot. YEAH.