Zo laden de afbeeldingen op je website sneller (zonder wazig te worden)

Waarom het gewicht van afbeeldingen uitmaakt

Het traagste op een pagina is meestal de grootste afbeelding, en dat is vaak wat de browser meet als Largest Contentful Paint (LCP). De Core Web Vitals van Google beschouwen een LCP onder 2,5 seconden als goed. Eén hero-foto van 3 MB op een mobiele verbinding kan dat hele budget in zijn eentje opmaken.

1. Lever afbeeldingen op het formaat waarop ze worden getoond

Het heeft geen zin een foto van 4000 pixels te sturen naar een plek die hem op 800 pixels breed toont. Als vuistregel is een afbeelding hooguit ongeveer twee keer zo breed als de weergavebreedte, wat hem scherp houdt op schermen met hoge dichtheid. Typische breedtes: 1600–2000 px voor een hero over de volle breedte, 800–1200 px voor afbeeldingen in artikelen, 300–400 px voor miniaturen.

2. Gebruik een modern bestandstype

WebP-bestanden zijn doorgaans 25–35% kleiner dan JPG bij vergelijkbare kwaliteit, en alle huidige browsers ondersteunen ze. Gebruik PNG alleen waar je verliesvrije graphics of transparantie nodig hebt. Moet je oudere software ondersteunen, bewaar dan een JPG als terugval. Zie JPG vs PNG vs WebP voor de details.

3. Comprimeer tot een redelijke grootte

Dit zijn ruwe doelen, geen regels: een hero-afbeelding onder ongeveer 200 KB, afbeeldingen in artikelen onder ongeveer 100 KB en miniaturen onder ongeveer 30 KB. Stel het doel in en laat de tool de hoogste kwaliteit zoeken die eraan voldoet, in plaats van met een schuifje te blijven proberen.

4. Laad afbeeldingen onder de vouw uitgesteld

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Lazy loading (uitgesteld laden) stelt afbeeldingen uit tot de bezoeker in de buurt scrolt. Pas het niet toe op de hero-afbeelding bovenaan de pagina — die moet meteen laden, omdat het meestal het LCP-element is.

5. Stel altijd breedte en hoogte in

Met de afmetingen in de HTML reserveert de browser de juiste hoeveelheid ruimte voordat de afbeelding binnenkomt, zodat de pagina niet verspringt tijdens het laden (dat verspringen wordt gemeten als Cumulative Layout Shift). Een beschrijvend alt-attribuut helpt de toegankelijkheid en het zoeken naar afbeeldingen.

6. Bied meerdere formaten aan met srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

De browser kiest het kleinste bestand dat scherp genoeg is voor het scherm van de bezoeker, zodat een telefoon niet de desktopversie downloadt.

Zo controleer je je werk

Haal de pagina door PageSpeed Insights of Lighthouse in de ontwikkelaarstools van Chrome. Beide markeren te grote en niet-geoptimaliseerde afbeeldingen en schatten hoeveel bytes je zou besparen.

De bestanden voorbereiden

1. Converteer de afbeelding naar WebP.
2. Stel de breedte in die je nodig hebt in de verkleintool — met vergrendelde verhouding.
3. Stel een maximale bestandsgrootte in en controleer het resultaat met de voor/na-schuif.
4. Exporteer één bestand voor elke breedte die je in de srcset wilt gebruiken.

Werk bij elke export vanuit het origineel. Een al gecomprimeerde kopie nogmaals comprimeren kost meer kwaliteit dan de bron één keer comprimeren.

Veelgestelde vragen