Hoe je afbeeldingen op een site sneller laat laden
De vijf ingrepen die de afbeeldingen van elke site lichter maken, op volgorde van effect.
Op de meeste sites zijn afbeeldingen het grootste deel van wat een bezoeker downloadt. Eén niet-geoptimaliseerde telefoonfoto kan zwaarder zijn dan de rest van de pagina bij elkaar. Afbeeldingen aanpakken is meestal de grootste en goedkoopste snelheidswinst, en een snelle pagina scoort beter, houdt bezoekers langer vast en levert meer op.
1. Laad afbeeldingen op de maat waarop ze te zien zijn
Een foto uit een telefoon is 4000 pixels breed of meer. Een tekstkolom is zelden breder dan 1200 pixels, en een kaartje of miniatuur veel minder. Elke overtollige pixel wordt gedownload en daarna door de browser weggegooid. Schaal vóór het uploaden: ongeveer 2000 pixels voor banners over de volle breedte, zodat ze scherp blijven op schermen met hoge dichtheid, 1200 tot 1600 voor afbeeldingen in de tekst en 600 tot 800 voor kaartjes. De schaaltool doet een hele map in één keer.
2. Comprimeer
Met de juiste afmetingen doet compressie de rest. Een foto op kwaliteit 80 ziet er op een webpagina identiek uit als op kwaliteit 100 en weegt vaak een derde. De afbeeldingscompressor werkt in batches en laat per bestand de winst zien.
3. Gebruik WebP
WebP wordt door alle huidige browsers ondersteund en is meestal 25 tot 35 procent lichter dan een JPG bij gelijke zichtbare kwaliteit, met daarbij transparantie, waardoor het ook veel PNG’s vervangt. Converteer met JPG naar WebP of PNG naar WebP. AVIF is nog lichter, maar codeert trager en wordt door uploadsystemen minder vaak geaccepteerd, dus de praktische standaard blijft WebP.
4. Kies het formaat op basis van de inhoud
| Inhoud | Beste formaat |
|---|---|
| Foto’s | WebP, of JPG waar WebP niet wordt geaccepteerd |
| Logo’s en pictogrammen | SVG als je het hebt, anders PNG of WebP |
| Schermafbeeldingen met tekst | PNG of verliesvrije WebP |
| Eenvoudige animaties | Een korte video in plaats van een GIF |
5. Help de browser slim te laden
- Uitgesteld laden. Afbeeldingen onder het eerste scherm moeten pas laden als de bezoeker er naartoe scrolt. De meeste platforms doen dat zelf; in gewone HTML zet je loading="lazy" op de img-tags die niet meteen zichtbaar zijn.
- Afmetingen. Geef elke afbeelding een breedte en hoogte, zodat de pagina niet verspringt terwijl de beelden binnenkomen. Verschuivende opmaak is onderdeel van Google’s Core Web Vitals.
- Eerst de hoofdafbeelding. De grote afbeelding bovenaan, die meestal als Largest Contentful Paint telt, mag nooit uitgesteld laden. Die moet juist zo vroeg mogelijk binnenkomen.
Hoeveel het scheelt
Een gewone pagina met tien telefoonfoto’s kan 30 MB wegen. Geschaald naar redelijke breedtes en gecomprimeerd komt diezelfde pagina meestal rond de 2 MB uit. Omgezet naar WebP ongeveer 1,4 MB. Op een mobiele verbinding is dat het verschil tussen een pagina die in een seconde verschijnt en een pagina die veel bezoekers wegklikken.
Je resultaten controleren
Google PageSpeed Insights en het Lighthouse-paneel in de ontwikkelaarstools van Chrome geven een lijst met te grote afbeeldingen, afbeeldingen die WebP zouden moeten zijn en het element van de Largest Contentful Paint. Meet vóór en na, en begin bij de pagina’s met het meeste verkeer.