De ultieme gids voor beeldoptimalisatie voor WordPress (EWWW, WebP, AVIF, Lazyload)

Waarom beeldoptimalisatie cruciaal is voor de prestaties van WordPress

Afbeeldingen dragen op de meeste WordPress-websites het meest bij aan de paginagrootte. Zelfs als al het andere geoptimaliseerd is — hosting, caching, CDN, databank — niet-geoptimaliseerde afbeeldingen kunnen de Core Web Vitals volledig verpesten, met name LCP (Grootste Inhoudsvolle Verf) En CLS (Cumulatieve lay-outverschuiving).

Dit is de reden waarom veel WordPress-sites honderden impressies in Google Search Console laten zien voor zoekopdrachten met afbeeldingen, maar vrijwel geen klikken ontvangen. Trage levering van afbeeldingen, wijzigingen in de lay-out, niet-ondersteunde formaten of defecte voorbeelden (bijvoorbeeld WebP-afbeeldingen die via WhatsApp worden gedeeld) verminderen allemaal de betrokkenheid en het vertrouwen van gebruikers.

Een goede beeldoptimalisatie gaat niet alleen over compressie. Het omvat het kiezen van het juiste formaat, het aanbieden van de juiste grootte, het beheersen van lazy loading en het garanderen van compatibiliteit met verschillende browsers, berichtenapps en sociale mediaplatformen.

Veelvoorkomende fouten bij beeldoptimalisatie in WordPress

Veel WordPress-sites herhalen dezelfde fouten:

• Afbeeldingen uploaden die groter zijn dan de maximale weergavegrootte.

• Alleen vertrouwen op JPEG of PNG

• Het LCP-beeld wordt pas geladen wanneer de laadtijd wordt aangehouden.

• Het niet definiëren van de afmetingen van de afbeelding veroorzaakt verschuivingen in de lay-out.

• WebP- of AVIF-bestanden serveren zonder terugvalopties.

• Breaking news previews in WhatsApp, Facebook of e-mailclients

Alleen al het oplossen van deze problemen kan de gebruikerservaring en de organische CTR aanzienlijk verbeteren.

WebP versus AVIF: welk formaat moet je gebruiken?

Er bestaan moderne afbeeldingsformaten om het probleem van grote afbeeldingsgroottes op te lossen, maar ze zijn niet allemaal gelijkwaardig.

WebP
WebP wordt breed ondersteund door moderne browsers en biedt sterke compressie met een goede beeldkwaliteit. Het is momenteel de veiligste standaardkeuze voor WordPress.

Voordelen:

• Ondersteund door alle gangbare browsers.

• Goede balans tussen kwaliteit en formaat.

• Compatibel met de meeste WordPress-plugins en CDN's.

Nadelen:

• In veel gevallen iets groter dan AVIF.

AVIF
AVIF biedt de beste compressie die momenteel beschikbaar is, waardoor de beeldgrootte vaak met 20–40% wordt verkleind in vergelijking met WebP.

Voordelen:

• Extreem kleine bestandsgroottes

• Uitstekende beeldkwaliteit bij lage bitrates.

Nadelen:

• Langzamere codering

• Beperkte ondersteuning in oudere browsers.

• Veelvoorkomende problemen met het delen op sociale media en berichtenapps.

Echte vergelijking: JPEG versus WebP versus AVIF

Voorbeeldafbeelding (hero-afbeelding, 1920px breed):

• JPEG: 420 KB

• WebP: 160 KB

• AVIF: 95 KB

Hoewel AVIF qua bestandsgrootte wint, biedt WebP vaak een betere balans tussen prestaties en compatibiliteit.

Het WhatsApp-probleem: waarom WebP problemen veroorzaakt bij het bekijken van afbeeldingen

Een van de meest voorkomende problemen die we in de praktijk tegenkomen, is dat afbeeldingen in WhatsApp niet goed worden weergegeven wanneer websites uitsluitend WebP of AVIF gebruiken.

WhatsApp doet dat WebP- of AVIF-bestanden worden niet betrouwbaar weergegeven. Wanneer afbeeldingen worden gebruikt in Open Graph-metatags. Als uw site alleen WebP aanbiedt, kan de preview een lege afbeelding tonen of helemaal niet werken.

Beste werkwijze om dit op te lossen:

• Altijd gebruiken JPEG of PNG voor og:image

• WebP/AVIF-bestanden alleen via serveren <picture> of server-side conversie

• Houd sociale previews gescheiden van frontend-optimalisatie.

Deze ene oplossing herstelt vaak direct de voorbeeldweergave en verbetert de doorklikratio van gedeelde links.

De juiste plugin kiezen: EWWW versus andere plugins

EWWW Image Optimizer is een van de meest flexibele tools voor het optimaliseren van afbeeldingen in WordPress.

Aanbevolen EWWW-instellingen:

• WebP-generatie inschakelen

• Schakel AVIF uit, tenzij uw publiek moderne browsers gebruikt.

• Schakel automatisch formaat aanpassen bij het uploaden in.

• Gebruik alternatieve afbeeldingen voor browsers die deze compatibiliteit niet ondersteunen.

Andere plugins zoals ShortPixel of Imagify werken ook goed, maar de sleutel is... correcte configuratieNiet de plugin zelf.

Lazy Loading: Krachtig, maar gevaarlijk bij misbruik.

Lazy loading is essentieel, maar een verkeerde toepassing ervan is een van de snelste manieren om je LCP-score te verlagen.

Nooit lazy loading:

• Hoofdafbeelding

• Uitgelichte afbeelding bovenaan de vouw

• Logo in de header

Altijd lazy loading:

• Afbeeldingen onder de vouw

• Galerijafbeeldingen

• Bloginhoud afbeeldingen

Correcte lazy loading verbetert de prestaties zonder de waargenomen snelheid te beïnvloeden.

CLS voorkomen met de juiste beeldafmetingen

CLS ontstaat vaak doordat afbeeldingen worden geladen zonder vooraf gedefinieerde afmetingen.

Beste praktijken:

• Stel altijd de breedte- en hoogtekenmerken in.

• Vermijd CSS-formaatwijziging zonder beeldverhouding.

• Gebruik responsieve afbeeldingsformaten (srcset)

Dit zorgt ervoor dat de browser de juiste ruimte reserveert voordat de afbeelding wordt geladen.

Responsieve afbeeldingen en srcset

WordPress genereert automatisch meerdere afbeeldingsformaten, maar veel websites gebruiken deze niet correct.

Zorg ervoor dat:

• Grote desktopafbeeldingen worden niet weergegeven aan mobiele gebruikers.

• srcset is ingeschakeld en functioneel

• Afbeeldingen worden niet onnodig verkleind door CSS.

Alleen al door de juiste beeldgrootte te gebruiken, kan de beeldbelasting met 50–70% worden verminderd.

Beeldoptimalisatie en LCP-verbeteringen

In de meeste praktijkgevallen met SpeedWP Pro:

• De LCP-tijd verbetert met 0,8–1,5 seconden na beeldoptimalisatie.

• De prestatiewinst op mobiele apparaten is groter dan op desktops.

• CLS-problemen worden vaak opgelost zonder JavaScript aan te raken.

Afbeeldingen zijn vaak het gemakkelijkste en meest effectieve doelwit voor optimalisatie.

Praktisch voorbeeld van SpeedWP Pro

Problemen op de locatie van de klant:

• Veel impressies, lage CTR

• Defecte WhatsApp-voorbeelden

• LCP boven 4 seconden

Wat we hebben opgelost:

• Afbeeldingen aan de voorkant geconverteerd naar WebP.

• JPEG behouden voor Open Graph

• Lazy loading voor hero-afbeeldingen is uitgeschakeld.

• Gedefinieerde afmetingen van de afbeelding

Resultaten:

• LCP verlaagd van 4,2s naar 2,1s

• WhatsApp-voorbeelden hersteld

• De organische CTR nam binnen twee weken toe.

Veelgestelde vragen: Afbeeldingsoptimalisatie in WordPress

Moet ik WebP of AVIF gebruiken voor afbeeldingen in WordPress?
Voor de meeste WordPress-sites is WebP de veiligste en meest praktische keuze. Het biedt sterke compressie, brede browserondersteuning en werkt goed samen met CDN's en caching-plugins. AVIF kan de bestandsgrootte verder verkleinen, maar kan compatibiliteitsproblemen en een tragere codering veroorzaken, met name op shared hosting.

Waarom worden afbeeldingen niet meer weergegeven wanneer je links deelt via WhatsApp?
WhatsApp biedt geen betrouwbare ondersteuning voor WebP- of AVIF-afbeeldingen in Open Graph-bestanden. Als uw og:image Als er naar een WebP- of AVIF-bestand wordt verwezen, kan de preview mislukken. De juiste oplossing is om JPEG of PNG te gebruiken voor Open Graph-metadata en WebP- of AVIF-bestanden alleen aan de frontend aan te bieden.

Moet ik alle afbeeldingen lazy loaden?
Nee. Het lazy loading van de hoofdafbeelding of de uitgelichte afbeelding boven de vouw kan de LCP-score aanzienlijk verlagen. Lazy loading moet alleen worden toegepast op afbeeldingen onder de vouw, galerijen en afbeeldingen in lange teksten.

Draagt beeldoptimalisatie direct bij aan SEO?
Ja. Geoptimaliseerde afbeeldingen verbeteren de pagina. snelheidHet doel is om de CLS te verlagen, de LCP te verbeteren en de bruikbaarheid op mobiele apparaten te vergroten. Al deze factoren beïnvloeden de ranking en de click-through rate, met name voor pagina's met veel afbeeldingen.

Is een plugin voor beeldoptimalisatie voldoende?
Plugins zijn nuttig, maar een correcte configuratie is belangrijker dan de plugin zelf. Zonder de juiste formaatselectie, fallback-opties en lazy loading-regels kan zelfs de beste plugin de prestaties negatief beïnvloeden.

Beeldoptimalisatie gaat niet over het kiezen van één specifiek formaat of plug-in. Het gaat erom te begrijpen hoe afbeeldingen zich gedragen op verschillende apparaten, browsers en platforms.

Correct toegepaste beeldoptimalisatie verbetert de laadsnelheid, de visuele stabiliteit, het delen op sociale media en de SEO-prestaties – allemaal tegelijk.

Als je WordPress-site veel impressies maar weinig klikken genereert, zijn afbeeldingen vaak de ontbrekende schakel.

Als u een volledige beeldaudit wilt, inclusief WebP-, AVIF-, lazy loading-, CLS- en LCP-optimalisatie, kunt u een aanvraag indienen. gratis prestatie-audit Ontdek verborgen groeimogelijkheden met SpeedWP Pro.