Afbeeldingen optimaliseren voor WordPress: WebP, lazy loading en meer

Wanneer we een trage WordPress-site analyseren, is het antwoord verrassend vaak hetzelfde: afbeeldingen. Niet de database, niet de plugins, maar simpelweg te grote, verkeerd geformatteerde plaatjes die allemaal tegelijk moeten laden. Het goede nieuws: dit is meestal het makkelijkst op te lossen probleem van allemaal.

Waarom afbeeldingen zo zwaar wegen

Een gemiddelde webpagina bestaat qua databelasting voor een groot deel uit afbeeldingen — vaak meer dan de helft van het totale gewicht van de pagina. Een foto die rechtstreeks van een telefoon of camera komt, is vaak vele malen groter dan nodig voor weergave op een website. Zonder optimalisatie stuurt WordPress die volledige bestandsgrootte gewoon door naar elke bezoeker.

WebP: hetzelfde plaatje, een fractie van de grootte

WebP is een modern beeldformaat dat vergelijkbare kwaliteit levert als JPEG of PNG, maar aanzienlijk kleiner in bestandsgrootte — regelmatig 25 tot 35 procent kleiner bij gelijke visuele kwaliteit. Vrijwel alle moderne browsers ondersteunen het inmiddels probleemloos. WordPress kan sinds enkele jaren zelf WebP-bestanden verwerken, en veel optimalisatietools zetten bestaande JPEG's en PNG's automatisch om.

Compressie: kwaliteit die je niet ziet, gewicht dat je wel voelt

Naast het formaat is compressie een tweede knop om aan te draaien. Bij verstandige compressie-instellingen is het kwaliteitsverlies met het blote oog nauwelijks waarneembaar, terwijl de bestandsgrootte flink omlaaggaat. De truc is de juiste balans vinden: te agressief comprimeren geeft zichtbare artefacten, te voorzichtig comprimeren laat winst liggen.

Juiste afmetingen: niet groter dan nodig

Een veelgemaakte fout is een afbeelding van 3000 pixels breed uploaden, terwijl die op de pagina maar 600 pixels breed wordt weergegeven. De browser downloadt dan alsnog het volledige bestand, om het vervolgens kleiner te tonen — pure verspilling. WordPress genereert automatisch verschillende formaten bij uploaden, maar het is de moeite waard om te controleren of het juiste formaat ook daadwerkelijk wordt ingeladen op elke plek.

Lazy loading: pas laden wanneer nodig

Lazy loading zorgt ervoor dat afbeeldingen pas worden geladen op het moment dat een bezoeker er daadwerkelijk naartoe scrollt, in plaats van dat de hele pagina in één keer alle afbeeldingen tegelijk moet ophalen. Voor lange pagina's met veel content — blogartikelen, productoverzichten — scheelt dit aanzienlijk in de tijd die nodig is voordat het zichtbare deel van de pagina klaar is. WordPress ondersteunt dit inmiddels standaard, zonder dat er een aparte plugin voor nodig is.

De snelste afbeelding is er een die pas laadt op het moment dat iemand hem daadwerkelijk gaat zien.

Praktische checklist

• Upload in WebP of laat een optimalisatietool het automatisch omzetten.
• Comprimeer bij upload, niet pas achteraf handmatig per afbeelding.
• Upload niet groter dan de maximale weergavegrootte op de pagina.
• Zorg dat lazy loading actief staat voor afbeeldingen buiten het eerste zichtbare scherm.
• Controleer oude, al bestaande afbeeldingen — die zijn vaak nooit geoptimaliseerd na uploaden.

Wat dit in de praktijk oplevert

Bij sites die we voor het eerst analyseren, zien we regelmatig dat alleen al het optimaliseren van bestaande afbeeldingen de totale paginagrootte met 40 tot 60 procent kan verminderen. Dat vertaalt zich direct naar snellere laadtijden, met name op mobiele verbindingen waar bandbreedte kostbaarder is dan op een vaste verbinding.

Kort samengevat

Afbeeldingen zijn vaak de grootste, makkelijkst te verhelpen snelheidswinst op een WordPress-site. WebP, verstandige compressie, de juiste afmetingen en lazy loading werken samen — en de combinatie van die vier is meestal genoeg om een merkbaar verschil te voelen, zonder dat er iets aan de rest van de site hoeft te veranderen.