Wat is WebP?
WebP is een afbeeldingsformaat dat door Google is ontwikkeld om foto's en graphics op het web kleiner te maken zonder zichtbaar kwaliteitsverlies. Het is de moderne opvolger van de oude formaten JPEG en PNG, die uit een tijd stammen waarin snelheid op het web minder belangrijk was.
Het idee is simpel: dezelfde afbeelding, maar in een slimmer verpakt bestand. WebP gebruikt betere compressietechnieken, waardoor een foto die als JPEG 200 kilobyte is, als WebP vaak rond de 130 tot 150 kilobyte uitkomt. Voor het oog is het verschil in kwaliteit meestal niet te zien.
WebP ondersteunt zowel compressie met kwaliteitsverlies (zoals JPEG) als zonder verlies en met transparantie (zoals PNG). Eén formaat vervangt dus beide oude formaten, en doet het compacter.
Waarom WebP het verschil maakt
Afbeeldingen zijn op de meeste MKB-sites veruit de zwaarste onderdelen van een pagina. Een homepage met een grote hero-foto en tien productbeelden bestaat qua laadgewicht vaak voor 60 tot 80 procent uit afbeeldingen. Die kleiner maken heeft dus direct het grootste effect op je laadtijd.
Snellere laadtijd is geen luxe: het is een rankingfactor. Google meet de gebruikerservaring via Core Web Vitals, en de zwaarste afbeelding bepaalt vaak je LCP (Largest Contentful Paint). Lichtere afbeeldingen verlagen je LCP direct.
En het effect op bezoekers is minstens zo belangrijk. Een pagina die snel laadt houdt mensen vast; een trage pagina jaagt ze weg voordat ze je aanbod zien. In onze ervaring is beeldoptimalisatie de eenvoudigste snelheidswinst die de meeste MKB-sites nog laten liggen.
WebP versus JPEG, PNG en AVIF
WebP is niet het enige formaat. Om te snappen wanneer je wat gebruikt, hier de belangrijkste verschillen op een rij.
- JPEG: prima voor foto's, maar 25 tot 35 procent groter dan WebP bij gelijke kwaliteit. Geen transparantie.
- PNG: nodig voor transparantie en scherpe graphics, maar vaak fors zwaarder dan WebP. WebP doet transparantie compacter.
- WebP: de veilige moderne standaard. Klein, ondersteunt transparantie en animatie, en werkt in alle moderne browsers.
- AVIF: nog compacter dan WebP, maar zwaarder om te genereren en iets minder breed ondersteund. Voor de meeste MKB-sites is WebP nu de praktische keuze; AVIF is een optie voor later.
- SVG: geen alternatief voor foto's, maar wel de beste keuze voor logo's en iconen. Combineer gerust.
Hoe converteer je naar WebP in WordPress?
Het goede nieuws: je hoeft in WordPress niets handmatig om te zetten. Er zijn drie praktische routes, van volledig automatisch tot handwerk voor losse gevallen.
Via een optimalisatie-plugin
Plugins zoals ShortPixel, Imagify of Smush converteren je bestaande én nieuwe afbeeldingen automatisch naar WebP en serveren de juiste versie per bezoeker. Je zet het één keer aan en de plugin doet de rest, ook voor beelden die je later uploadt.
Via je LiteSpeed-server
Draai je op LiteSpeed-hosting, dan kan de LiteSpeed Cache-plugin afbeeldingen server-side naar WebP omzetten en cachen. Dat is snel en belast je site nauwelijks. Bij onze WordPress-hosting staat dit standaard klaar, zodat je er zelf niets voor hoeft te installeren.
Handmatig voor losse afbeeldingen
Voor een enkele afbeelding kan je een gratis online-tool of een grafisch programma gebruiken om naar WebP te exporteren, en die vervolgens uploaden. Prima voor incidenteel gebruik, maar onhandig voor een hele site.
Rekenvoorbeeld: hoeveel scheelt het?
Neem een typische MKB-homepage met een hero-afbeelding en acht productfoto's, samen 2,4 megabyte aan beeld in JPEG en PNG.
Voor conversie: 9 afbeeldingen, samen 2,4 MB. Op een gemiddelde mobiele verbinding draagt dat grofweg 2 tot 3 seconden bij aan de laadtijd.
Na conversie naar WebP: bij een besparing van 30 procent zakt het beeldgewicht naar ongeveer 1,7 MB, een verschil van zo'n 0,7 MB.
Effect op de bezoeker: die 0,7 MB minder scheelt op mobiel al snel een halve tot hele seconde laadtijd, precies in het venster dat je LCP en je bounce beïnvloedt.
Effect gestapeld: combineer je WebP met lazy loading van beelden onder de vouw, dan laadt de eerste schermvulling nog lichter. Twee kleine ingrepen, samen een merkbaar snellere pagina.
Valkuilen bij het overstappen
WebP is bijna altijd een verbetering, maar er zijn een paar punten waar je op moet letten om geen nieuwe problemen te introduceren.
- Comprimeer niet te agressief: een te lage kwaliteitsinstelling geeft wazige of vlekkerige foto's. Een instelling rond 75 tot 85 procent is meestal de zoete plek.
- Behoud je originelen: laat een plugin de originele bestanden bewaren, zodat je terug kan als een conversie tegenvalt.
- Upload op de juiste afmeting: WebP maakt een te grote foto niet klein genoeg. Upload beelden op de weergavegrootte, niet 4000 pixels breed voor een blokje van 400.
- Controleer transparantie: bij PNG's met transparantie moet WebP die behouden. Check logo's en iconen na de conversie.
- Test na het aanzetten: kijk op een paar pagina's of alle beelden nog netjes en scherp verschijnen.
WebP, alt-tags en lazy loading samen
WebP lost het bestandsgewicht op, maar volledige beeldoptimalisatie is meer dan het formaat alleen. Twee dingen horen erbij en versterken het effect.
Ten eerste alt-tags: een korte, beschrijvende alt-tekst per afbeelding helpt Google begrijpen wat erop staat en is bovendien belangrijk voor toegankelijkheid. Het formaat verandert daar niets aan, dus die alt-teksten blijven gewoon nodig.
Ten tweede lazy loading: beelden die onder de vouw staan hoeven niet meteen te laden. In combinatie met WebP zorgt dat ervoor dat de eerste schermvulling zo licht mogelijk is, wat je LCP verder verbetert. Samen vormen WebP, correcte afmetingen, alt-tags en lazy loading de complete beeldaanpak.
Hoe wij beeldoptimalisatie aanpakken
Bij het optimaliseren van een site zetten we WebP-conversie vroeg in, omdat het de grootste snelheidswinst per uur werk geeft. We serveren WebP server-side via LiteSpeed, uploaden beelden op de juiste afmeting, en houden de originelen achter de hand.
Daarna kijken we naar de rest van het snelheidsplaatje: caching, lazy loading en de zwaarste elementen boven de vouw. Beeld is de eerste stap, niet de enige. De complete lijst staat in onze gids WordPress speed-optimalisatie.
Afbeeldingen zijn meestal het zwaarste onderdeel van een pagina en tegelijk het makkelijkst te verlichten. WebP is de eenvoudigste snelheidswinst die de meeste MKB-sites nog laten liggen: één keer instellen, blijvend sneller.