Hoe optimaliseer je afbeeldingen voor je website?

Onbewerkte afbeeldingen zijn een van de meestvoorkomende oorzaken van een trage website. Een foto direct van een camera of stockfoto-site is vaak vele malen groter dan nodig voor gebruik op het web. Deze stappen lossen het grootste deel van dat probleem op.

Stap 1: kies het juiste bestandsformaat

WebP is voor de meeste foto's het beste compromis tussen kwaliteit en bestandsgrootte, en wordt door alle moderne browsers ondersteund. Gebruik JPG als fallback voor oudere situaties, en PNG alleen voor afbeeldingen die transparantie nodig hebben, zoals logo's. Vermijd BMP en ongecomprimeerde TIFF-bestanden volledig op het web.

Stap 2: comprimeer voordat je uploadt

Comprimeren verkleint het bestand door onzichtbare of nauwelijks zichtbare detailinformatie weg te laten. Veel CMS'en (WordPress, Shopify) doen dit deels automatisch via een plugin of ingebouwde functie, maar controleer of die daadwerkelijk actief is, hij staat niet altijd standaard aan.

Stap 3: serveer de juiste afmetingen

Een afbeelding van 3000 pixels breed tonen op een plek van 400 pixels kost onnodig laadtijd, de browser moet het volledige bestand downloaden ook al toont hij maar een fractie ervan. Upload afbeeldingen op ongeveer de maximale weergavegrootte, en gebruik srcset als je dezelfde afbeelding op verschillende schermformaten anders wil tonen.

Stap 4: gebruik lazy loading

Met loading="lazy" op een <img>-tag laadt de browser afbeeldingen pas zodra een bezoeker er bijna naartoe scrollt, in plaats van alles vooraf te downloaden. Gebruik dit niet op de afbeelding die direct zichtbaar is bij het laden van de pagina (vaak de belangrijkste voor LCP), die moet juist zo snel mogelijk laden.

Stap 5: vergeet de alt-tekst niet

Alt-tekst beschrijft een afbeelding voor mensen die 'm niet kunnen zien (schermlezers) en voor zoekmachines die de afbeelding niet visueel kunnen beoordelen. Beschrijf wat er daadwerkelijk op de afbeelding staat, kort en concreet, zonder 'm vol te proppen met zoekwoorden.

SiteLens houdt je PageSpeed-score bij over tijd, zodat je direct ziet of afbeeldingsoptimalisatie daadwerkelijk effect heeft gehad op je laadsnelheid. Start een gratis proefperiode van 14 dagen.

Verwante content

Wat is LCP? · Wat is een goede PageSpeed-score, en hoe verbeter je 'm? · Hoe verbeter je Core Web Vitals?