Heb je weleens een prestatietest gedraaid in Google PageSpeed Insights en de melding "Gebruik afbeeldingsindelingen van de volgende generatie" gekregen? Dan werd je aangeraden je afbeeldingen naar WebP om te zetten. Google beschouwt dat als de moderne standaard voor afbeeldingen op het web, en daar zijn goede redenen voor.
Waar staat WebP voor?
WebP is een afbeeldingsformaat van Google, uitgebracht in 2010. De naam is een samentrekking van Web en P (van Picture, het Engelse woord voor afbeelding). Het doel was helder: betere compressie dan JPG en PNG, zodat webpagina's lichter worden zonder dat de beeldkwaliteit eronder lijdt.
Anders dan JPG (alleen compressie met verlies) en PNG (alleen compressie zonder verlies) beheerst WebP allebei de compressiemodi, lossy en lossless, plus transparantie via een alfakanaal en animatie. In de praktijk is het dus één formaat dat JPG, PNG en GIF in één bestand vervangt.
Hoe werkt WebP?
Lossy WebP is gebouwd op de videocodec VP8, ook van Google. Daarin zit een techniek die blokvoorspelling heet: in plaats van elke pixel apart op te slaan, voorspelt het algoritme de waarde van een blok pixels aan de hand van de omliggende blokken en bewaart het alleen het verschil tussen de voorspelling en de werkelijke waarde. Hoe kleiner dat verschil, hoe lichter het bestand.
Lossless WebP werkt met een eigen set technieken: ruimtelijke voorspelling, kleurtransformatie en entropiecompressie via LZ77 met Huffman-codering. Het resultaat is een verliesvrij bestand dat flink lichter is dan een vergelijkbare PNG: gemiddeld 26% kleiner bij dezelfde inhoud.
Is WebP echt lichter dan JPG en PNG?
Ja, en het scheelt behoorlijk. Volgens de cijfers van Google zelf:
| Vergelijking | Gemiddelde besparing |
|---|---|
| Lossy WebP vs JPG (zelfde beeldkwaliteit) | 25–35% kleiner |
| Lossless WebP vs PNG (zelfde kwaliteit) | ~26% kleiner |
| WebP met transparantie vs PNG | ~22% kleiner |
Concreet: een webshop met 500 productfoto's in JPG snijdt een derde van het totale beeldgewicht weg door alleen maar naar WebP om te zetten, zonder dat je er iets van ziet.
💡 Wat het voor je SEO betekent: Google weegt laadsnelheid mee in de rangschikking. WebP-afbeeldingen verlagen je LCP (Largest Contentful Paint), een van de belangrijkste Core Web Vitals, en dragen zo rechtstreeks bij aan een betere positie in de zoekresultaten.
Wat zijn de voordelen van WebP?
- Lichtere bestanden bij gelijke kwaliteit: zowel in de lossy als in de lossless modus comprimeert WebP efficiënter dan JPG en PNG.
- Transparantie: net als PNG heeft WebP een volledig alfakanaal met 256 niveaus van dekking, maar dan in een lichter bestand.
- Animatie: geanimeerde WebP vervangt de GIF met veel lichtere bestanden en betere kleurweergave (een GIF blijft steken op 256 kleuren, WebP kan er miljoenen aan).
- Lossy en lossless in één formaat: één bestandstype voor al je toepassingen: foto's, logo's, iconen en animaties.
- Metadata: WebP ondersteunt EXIF en XMP, dus gegevens over camera, locatie en auteursrecht blijven bewaard.
- Standaard ondersteund in elke moderne browser: Chrome, Firefox, Safari, Edge en Opera kunnen sinds 2020 overweg met WebP.
Waar loopt WebP tegenaan?
- Buiten het web wisselend ondersteund: veel oudere beeldbewerkers, viewers en verouderde systemen herkennen het formaat nog niet uit zichzelf. Windows 10 en ouder hebben een extra codec nodig om WebP in de Verkenner te openen.
- Niet overal geaccepteerd: platforms als WhatsApp en sommige e-mailmarketingtools nemen nog geen WebP-uploads aan. Daar heb je dus nog altijd JPG of PNG nodig.
- Beperkt bewerkbaar: weinig professionele programma's ondersteunen WebP volledig om in te werken. Houd je originelen daarom in RAW, TIFF of PSD en exporteer pas de eindversie naar WebP.
- Werkt niet in e-mail: programma's als Outlook en Apple Mail geven WebP niet weer. Gebruik voor e-mail dus JPG of PNG.
WebP, JPG, PNG en SVG naast elkaar
| Kenmerk | WebP | JPG | PNG | SVG |
|---|---|---|---|---|
| Compressie | Lossy en lossless | Lossy | Lossless | Vectorieel |
| Transparantie | Ja | Nee | Ja | Ja |
| Animatie | Ja | Nee | Nee* | Ja |
| Ideaal voor foto's | Ja | Ja | Nee | Nee |
| Ideaal voor logo's en iconen | Ja | Nee | Ja | Ja |
| Schaalbaar zonder verlies | Nee | Nee | Nee | Ja |
| Bestandsgrootte | Zeer klein | Klein | Middelgroot tot groot | Zeer klein |
| Universele ondersteuning | Moderne browsers | Universeel | Universeel | Moderne browsers |
* Geanimeerde PNG (APNG) bestaat wel, maar wordt beperkt ondersteund.
Wanneer kies je WebP?
Voor verreweg de meeste afbeeldingen op moderne websites en webapps is WebP de beste keuze:
- Productfoto's in webshops: dezelfde afmetingen als een JPG, maar 25–35% lichter, dus snellere pagina's zonder kwaliteitsverlies.
- Banners en hero-afbeeldingen: juist daar bepaalt het gewicht van de afbeelding rechtstreeks je LCP en de ervaring van de bezoeker.
- Logo's en iconen met transparantie: vervangt PNG met een lichter bestand en een volwaardig alfakanaal.
- Afbeeldingen op blogs en portfolio's: lichter, even mooi, en een betere PageSpeed-score.
- Vervanging van geanimeerde GIF's: geanimeerde WebP is veel lichter en geeft kleuren veel beter weer dan GIF.
Gebruik WebP liever niet voor afbeeldingen die je per e-mail verstuurt, voor uploads naar netwerken die het formaat niet accepteren en voor werkbestanden die je nog gaat bewerken. Houd het daar bij JPG of PNG.
Zet je afbeeldingen nu om naar WebP
Maak je afbeeldingen tot 35% lichter zonder zichtbaar verlies. Zet JPG en PNG gratis om naar WebP, gewoon in je browser.
Omzetten naar WebPHoe zet je WebP in met een terugvaloptie voor oude browsers?
Alle moderne browsers kunnen WebP aan, maar het blijft verstandig om een JPG of PNG achter de hand te houden. In HTML regel je dat met de tag <picture>:
Browsers die WebP begrijpen laden zo het lichtste bestand; de rest pakt automatisch de JPG of PNG. Google raadt deze aanpak aan voor sites die overal goed moeten werken.