Afbeeldingen optimaliseren in WordPress is de snelste manier om je laadtijd te verbeteren. Afbeeldingen zijn verantwoordelijk voor 50–80% van het totale paginagewicht — een enkel groot fotobestand kan zwaarder zijn dan al je CSS, JavaScript en HTML samen. Het vergt geen programmeerkennis om er direct mee aan de slag te gaan.
1. Compressie vermindert de bestandsgrootte door overbodige data te verwijderen, zonder zichtbaar kwaliteitsverlies. Een foto van 2 MB kan gecomprimeerd worden naar 300 KB terwijl het verschil voor het menselijk oog onzichtbaar is.
2. WebP-formaat is een modern bestandsformaat ontwikkeld door Google. WebP-bestanden zijn 25–35% kleiner dan JPEG bij gelijke beeldkwaliteit. Alle moderne browsers ondersteunen WebP. Er is geen reden meer om JPEG te gebruiken voor foto’s die online staan.
3. Lazy loading laadt afbeeldingen buiten het scherm pas wanneer de bezoeker er naartoe scrollt. De afbeeldingen bovenaan de pagina worden meteen geladen; alles daaronder wacht tot het nodig is. Dit versnelt de initiële laadtijd aanzienlijk op pagina’s met veel afbeeldingen.
| Plugin | Gratis | Wat doet het |
|---|---|---|
| Imagify | Gedeeltelijk (25 afb./maand gratis) | Compressie + WebP conversie — aanbevolen |
| Smush | Gedeeltelijk | Compressie + lazy loading |
| ShortPixel | Gedeeltelijk (100 credits/maand gratis) | Compressie + WebP, per-afbeelding facturering |
| EWWW Image Optimizer | Volledig gratis | Compressie + WebP, iets minder gebruiksvriendelijk |
Aanbeveling: begin met Imagify. De gratis versie geeft 25 afbeeldingen per maand — voldoende om te testen. Voor een volledige bestaande site is een betaald account de investering snel terugverdiend in betere rankings en hogere conversie.
De meeste sites hebben honderden of duizenden afbeeldingen die al geüpload zijn zonder optimalisatie. Imagify lost dit op met bulk-optimalisatie:
Na de bulk-optimalisatie toont Imagify hoeveel ruimte bespaard is — typisch 40–70% van het totale gewicht.
Bulk-optimalisatie lost het verleden op. Goede gewoonten bij upload voorkomen nieuwe problemen:
Formaat: máximum 1200–1500px breed voor contentafbeeldingen. Grotere afmetingen worden door WordPress verkleind maar niet gecomprimeerd — het origineel blijft staan en neemt ruimte in.
Bestandstype: JPEG voor foto’s, PNG voor afbeeldingen met transparantie (logo’s, iconen), SVG voor vectorafbeeldingen.
Bestandsnaam: gebruik beschrijvende namen met koppeltekens. wordpress-fout-oplossen.jpg is beter dan IMG_2047.jpg — voor SEO en voor accessibility.
Pre-upload compressie: voor afbeeldingen die je niet via een plugin wil verwerken: TinyPNG.com en Squoosh.app zijn gratis online tools die je afbeelding verkleinen voor je hem uploadt.
WordPress heeft lazy loading ingebouwd sinds versie 5.5. Alle afbeeldingen in de content krijgen automatisch het loading="lazy" attribuut — de browser laadt ze pas als de bezoeker ernaartoe scrollt.
De belangrijke uitzondering: de hero-afbeelding.
De hero-afbeelding (de grote afbeelding bovenaan de pagina, above the fold) mag je nooit lazy loaden. Die afbeelding is het element dat de LCP-score bepaalt. Lazy loading op de hero vertraagt de LCP en geeft je een slechte Core Web Vitals-score.
In WP Rocket: schakel lazy loading in via Instellingen > Media > Lazy loading. WP Rocket sluit de eerste afbeelding op elke pagina automatisch uit van lazy loading.
Afbeeldingen raken twee van de drie Core Web Vitals:
LCP (Largest Contentful Paint): de hero-afbeelding is op de meeste pagina’s het LCP-element. Een grote, niet-geoptimaliseerde hero = slechte LCP = slechtere ranking in Google.
Oplossing: comprimeer de hero-afbeelding, converteer naar WebP, en voeg fetchpriority="high" toe aan de hero img-tag zodat de browser hem prioritair laadt.
CLS (Cumulative Layout Shift): afbeeldingen zonder breedte en hoogte-attributen veroorzaken lay-outverschuiving. De browser weet niet hoeveel ruimte hij moet reserveren en verschuift de pagina als de afbeelding inlaadt.
Oplossing: altijd width en height instellen op afbeeldings-tags. Goede thema’s doen dit automatisch. Bij page builders controleer je dit per element.
→ Core Web Vitals verbeteren in WordPress
Terug naar: WordPress sneller maken (pillar) → Core Web Vitals en afbeeldingen: Core Web Vitals verbeteren → Caching instellen: WordPress caching →
n
📚 Lees ook: Bekijk onze complete gids over WordPress sneller maken.
Geen technische kennis nodig · Antwoord binnen de dag
