Hoe afbeeldingen te optimaliseren voor websites
Afbeeldingen vormen meestal het grootste deel van het gewicht van een pagina. Vijf beslissingen lossen het meeste op.
Bijgewerkt op 1 september 2026
Afbeeldingen zijn de grootste bijdrage aan het paginagewicht op de meeste sites, en het Largest Contentful Paint-element is een afbeelding op de meeste pagina's. Het optimaliseren ervan is het meest effectieve prestatiewerk dat beschikbaar is, en het meeste ervan zijn beslissingen in plaats van tooling.
Dit is de volgorde die ertoe doet, van grootste effect tot kleinste.
Stappen
- 1
1. Serveer de juiste afmetingen
Meet de grootste CSS-breedte die de afbeelding inneemt en exporteer op ongeveer twee keer die breedte voor schermen met hoge dichtheid. Een hero-afbeelding van 1200 CSS-pixels heeft een bron van 2400px nodig, niet een camera-origineel van 6000px. Deze enkele stap overtreft meestal alles bij elkaar.
- 2
2. Gebruik WebP, met AVIF waar mogelijk
WebP is 25–35% kleiner dan JPEG bij gelijke kwaliteit en wordt overal ondersteund. AVIF gaat nog verder, maar codeert langzamer. Houd een JPEG-fallback aan als u zeer oude clients moet ondersteunen.
- 3
3. Stel de kwaliteit in op basis van de inhoud, niet op basis van gewoonte
75–85 voor foto's. Hoger voor afbeeldingen met scherpe randen, waar compressie-artefacten beter zichtbaar zijn. Controleer het resultaat op de werkelijke weergavegrootte.
- 4
4. Stel altijd breedte en hoogte in
Expliciete afmetingen laten de browser ruimte reserveren voordat de afbeelding wordt geladen, wat lay-outverschuiving voorkomt. Dit is een Cumulative Layout Shift-oplossing die niets kost.
- 5
5. Lazy-load onder de vouw, nooit erboven
Voeg loading="lazy" toe aan afbeeldingen verderop de pagina. Laad uw LCP-afbeelding niet lazy — dat vertraagt precies wat gemeten wordt.
Metadata strippen bij export
EXIF en ingebedde kleurprofielen voegen gewicht toe zonder weergavevoordeel op het web.
Gebruik SVG voor logo's en iconen
Een vectorlogo is meestal een paar kilobytes en blijft scherp op elke grootte en dichtheid.