Afbeeldingen optimaliseren voor je website en je PageSpeed verbeteren

Laadsnelheid is sinds 2018 voor desktop en sinds 2021 voor mobiel een door Google bevestigde rankingfactor. Belangrijker nog: het raakt je conversie rechtstreeks. Elke extra seconde laadtijd verhoogt het aantal bezoekers dat afhaakt met tot 32%, aldus Google zelf. En onderzoek van Portent laat zien dat webshoppagina's die in één seconde laden tot drie keer beter converteren dan pagina's die er vijf seconden over doen.

Afbeeldingen zijn doorgaans goed voor 50 tot 80% van het totale gewicht van een webpagina. Ze goed optimaliseren is dus de ingreep met de meeste impact op de prestaties van welke site dan ook.

Waar PageSpeed Insights naar kijkt bij afbeeldingen

Google PageSpeed Insights (PSI) analyseert je pagina en meldt beeldproblemen in verschillende categorieën. Deze kom je het vaakst tegen:

• "Gebruik afbeeldingsformaten van de nieuwe generatie": verschijnt als je site JPG of PNG gebruikt waar WebP (of AVIF) het bestand fors zou verkleinen.
• "Geef afbeeldingen de juiste afmetingen": verschijnt als de geüploade afbeelding groter is dan het vak waarin ze wordt getoond. Bijvoorbeeld: een foto van 2000px uploaden om op 400px te tonen.
• "Stel afbeeldingen buiten het scherm uit": verschijnt als afbeeldingen onder de vouw meteen met de rest van de pagina meeladen in plaats van pas wanneer de bezoeker ernaartoe scrolt (lazy loading).
• "Codeer afbeeldingen efficiënt": verschijnt als er nog compressiewinst te halen valt zonder dat je het verschil ziet.
• "LCP-afbeelding": geeft aan welke afbeelding de Largest Contentful Paint van de pagina is — het hoofdelement dat een van de Core Web Vitals bepaalt.

De 6 uitgangspunten van beeldoptimalisatie voor het web

1. Kies per type afbeelding het juiste formaat

De keuze van het formaat weegt zwaarder dan welke compressie dan ook:

WebP levert bestanden op die 25 tot 35% kleiner zijn dan JPG en 20 tot 30% kleiner dan PNG, bij gelijke beeldkwaliteit. In 2026 ondersteunt meer dan 97% van de gebruikte browsers het formaat — technisch is er geen reden meer om het in nieuwe sites te vermijden.

2. Comprimeer zonder zichtbaar kwaliteitsverlies

Comprimeren betekent het bestand lichter maken terwijl de afmetingen gelijk blijven. Zet je een JPG-foto van 100% naar 80% kwaliteit, dan wordt het bestand vijf tot tien keer kleiner zonder dat je op het scherm verschil ziet. Dat is de ideale marge voor het web.

Praktische richtlijnen per type afbeelding:

• Hero of hoofdbanner: onder de 200 KB
• Productfoto (webshop): 50–150 KB
• Afbeelding bij een blogartikel: 50–120 KB
• Thumbnail of miniatuur: 10–30 KB
• Logo (PNG of WebP): onder de 30 KB
• SVG-iconen: onder de 5 KB

3. Upload afbeeldingen op het echte weergaveformaat

Dit is de meestgemaakte fout en meteen een van de duurste: afbeeldingen uploaden die veel groter zijn dan het vak waarin ze staan. De browser haalt het hele bestand binnen en gooit de overtollige pixels bij het renderen weg.

Wat dat concreet kost:

• Een productfoto van 3000×3000px in een vak van 600×600px: de browser haalt negen miljoen pixels op en gebruikt er 360 duizend — 96% verspilling.
• Een banner van 4000px breed op een site met een maximale lay-out van 1440px: 63% van de opgehaalde pixels verdwijnt meteen in de prullenbak.

De regel is eenvoudig: upload nooit meer dan het dubbele van het weergaveformaat (het dubbele om Retina- en HiDPI-schermen te bedienen). Voor een vak van 600px breed upload je dus hooguit 1200px.

Met Verkleinen van ImageTools zet je de afmetingen goed vóór het uploaden, in exacte pixels of als percentage.

4. Zet lazy loading aan

Bij lazy loading laadt een afbeelding pas wanneer ze bijna in beeld komt, in plaats van dat alles meteen bij het openen wordt opgehaald. Het effect is groot: op pagina's met veel beeld, zoals productoverzichten of lange artikelen, scheelt dat 60 tot 80% in het startgewicht van de pagina.

De eenvoudigste manier zit al in modern HTML: voeg het attribuut loading="lazy" toe aan je afbeeldingstags:

<!-- Afbeelding die meteen moet laden (boven de vouw) -->
<img src="hoofdbanner.webp" alt="Banner" loading="eager">

<!-- Afbeeldingen die kunnen wachten (onder de vouw) -->
<img src="product-1.webp" alt="Product 1" loading="lazy">
<img src="product-2.webp" alt="Product 2" loading="lazy">

Let op: zet loading="lazy" nooit op de hoofdafbeelding boven de vouw (hero, banner, de eerste productfoto). Dat vertraagt je LCP — de belangrijkste van de Core Web Vitals — en kost je meteen punten in PageSpeed.

5. Zet width en height in je afbeeldingstags

Een browser bouwt de lay-out op voordat hij weet hoe groot de afbeeldingen zijn. Staan width en height er niet bij, dan reserveert hij niet de juiste ruimte — en zodra de afbeelding binnenkomt, "springt" de lay-out en schuiven tekst en knoppen weg. Dat is wat PageSpeed meet als Cumulative Layout Shift (CLS), ook een Core Web Vital.

<!-- Zonder afmetingen: veroorzaakt layout shift -->
<img src="product.webp" alt="Product">

<!-- Met afmetingen: reserveert meteen de juiste ruimte -->
<img src="product.webp" alt="Product" width="600" height="600">

De waarden van width en height in je HTML hoeven niet gelijk te zijn aan het formaat waarop je de afbeelding toont; ze leggen alleen de verhouding vast. De weergavegrootte regel je met CSS.

6. Gebruik responsieve afbeeldingen met srcset

Met srcset bied je per apparaat een andere versie van dezelfde afbeelding aan: kleiner voor telefoons, groter voor desktops. De browser kiest zelf de versie die bij het scherm past.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Product"
  width="800"
  height="800"
  loading="lazy"
>

Voor webshops met veel productfoto's scheelt srcset 40 tot 60% aan dataverkeer bij bezoekers op mobiel.

De complete checklist voor beeldoptimalisatie

Loop deze lijst langs voordat je een pagina publiceert of bestaand beeld vervangt:

• ☐ Afbeeldingen in WebP (of SVG bij vectorbeeld)
• ☐ Compressie toegepast — foto's waar mogelijk onder de 150 KB
• ☐ Juiste afmetingen — niet groter dan het dubbele van het weergavevak
• ☐ loading="lazy" op alle afbeeldingen onder de vouw
• ☐ loading="eager" (of geen attribuut) op de hoofdafbeelding boven de vouw
• ☐ width en height ingevuld bij elke <img>-tag
• ☐ Een beschrijvend alt-attribuut bij elke afbeelding (toegankelijkheid en SEO)
• ☐ srcset bij afbeeldingen die op mobiel en desktop sterk in formaat verschillen
• ☐ De LCP-afbeelding zonder loading="lazy" en zo mogelijk met fetchpriority="high"

Optimaliseren per platform

WordPress

WordPress zet vanaf versie 6.1 automatisch om naar WebP, mits je server dat aankan. Voor de zekerheid installeer je een optimalisatieplug-in als Imagify, ShortPixel of Smush: die comprimeren, zetten om naar WebP en zetten lazy loading aan bij het beeld dat al in je mediabibliotheek staat.

Shopify

Shopify zet beeld sinds 2021 automatisch om naar WebP en levert per apparaat de juiste versie. Wat je zelf in de hand houdt, is het formaat dat je uploadt: 2048×2048px voor productfoto's is het advies, en Shopify schaalt dat per weergavecontext bij.

Wix, Squarespace en andere websitebouwers

De meeste moderne bouwers passen zelf al compressie en lazy loading toe. Wat aan jou blijft, is beeld met redelijke afmetingen aanleveren: camerafoto's van 8 MB uploaden belast de server en levert varianten op die groter zijn dan nodig.

Sites in kaal HTML/CSS of met een framework (Next.js, Nuxt en dergelijke)

Dan ligt de hele optimalisatie bij de ontwikkelaar. De <Image>-component van Next.js regelt bijvoorbeeld lazy loading, srcset en conversie naar WebP automatisch. Heeft je framework die abstractie niet, dan loop je de checklist hierboven handmatig af.

Zo meet je wat je optimalisaties opleveren

Meet het resultaat na afloop met deze tools:

• Google PageSpeed Insights (pagespeed.web.dev) — volledige analyse met diagnose per element, apart voor mobiel en desktop.
• Google Search Console → rapport Pagina-ervaring — laat de stand van je Core Web Vitals zien op basis van echte bezoekersdata.
• WebPageTest.org — gedetailleerde technische analyse met een laadwaterval, handig om te zien welke afbeelding precies je LCP ophoudt.
• Chrome DevTools → Network — filter op "Img" om alle geladen afbeeldingen te zien, met hun grootte en downloadtijd.

Veelgestelde vragen