Moet je WebP gebruiken? Kort antwoord
- Ja voor afbeeldingen op je eigen website, als je site of CDN ze kan serveren. Elke huidige grote browser ondersteunt WebP.
- Ja voor transparante afbeeldingen op het web: lossy WebP met alpha is veel kleiner dan PNG.
- Nee voor afbeeldingen in e-mails, printbestanden, archieven en bestanden die je naar anderen stuurt. Gebruik daar JPG of PNG.
- Overweeg ook AVIF: dat is meestal kleiner dan WebP, en veel sites serveren AVIF met WebP of JPG als fallback.
Bestandsgroottebesparing: 25–35% kleiner
De voornaamste reden om van JPG naar WebP over te stappen is bestandsgroottereductie. Google ontwikkelde WebP met geavanceerdere compressie-algoritmen dan de DCT-codering uit 1992 die JPG gebruikt. Het resultaat is aanzienlijk kleinere bestanden bij equivalente visuele kwaliteit — consistent 25–35% kleiner voor een breed scala aan afbeeldingstypen.
Dit zijn typische praktijkresultaten bij vergelijking van JPG (kwaliteit 85) met WebP (kwaliteit 80) bij equivalente waargenomen kwaliteit:
| Afbeeldingstype | JPG-grootte (q85) | WebP-grootte (q80) | Besparing |
|---|---|---|---|
| Productfoto (1200px) | 180 KB | ~120 KB | 33% |
| Hero-banner (1920px) | 450 KB | ~310 KB | 31% |
| Blogpost-afbeelding (800px) | 95 KB | ~65 KB | 32% |
| Miniatuur (300px) | 25 KB | ~17 KB | 32% |
| Totaal pagina (20 afbeeldingen) | 2,8 MB | ~1,9 MB | 32% |
Voor een typische webpagina met 20 afbeeldingen van in totaal 2,8 MB in JPG bespaart overstappen naar WebP ongeveer 900 KB. Dat is bijna 1 MB minder data bij elke paginaweergave — en dat loopt snel op bij duizenden dagelijkse bezoekers.
Kwaliteitsvergelijking: zie je het verschil?
De vraag die iedereen stelt: ziet WebP er even goed uit als JPG? Het korte antwoord is ja, en in veel gevallen zelfs iets beter. WebP gebruikt een geavanceerdere compressiepipeline die bepaalde afbeeldingskenmerken beter verwerkt dan JPG:
- Bij dezelfde bestandsgrootte ziet WebP er iets scherper uit dan JPG — minder blokartefacten, betere randverwerking
- Bij dezelfde visuele kwaliteit is WebP 25–35% kleiner
- WebP verwerkt vloeiende overgangen beter dan JPG, met minder banding in luchten en huidtinten
- WebP produceert minder ringartefacten rondom hoog-contrast randen (tekst over foto's, harde lijnen)
- WebP ondersteunt transparantie (alfakanaal), wat JPG niet doet — geen nep-witte achtergronden meer
Bij kwaliteitsinstellingen boven 75 is het verschil tussen WebP en JPG vrijwel niet waarneembaar voor het menselijk oog. De meeste sitebezoekers merken geen verandering in de weergave van afbeeldingen — maar ze zullen wel snellere pagina's opmerken.
Transparantiebonus: Anders dan JPG ondersteunt WebP transparante achtergronden. Als je momenteel PNG gebruikt voor transparante afbeeldingen en JPG voor foto's, kan WebP beide formaten op je website vervangen.
Impact op Core Web Vitals
Google's Core Web Vitals zijn rankingsignalen die de gebruikerservaring direct meten. Overstappen naar WebP kan je prestatiescore meetbaar verbeteren:
Largest Contentful Paint (LCP)
LCP meet hoe snel het grootste zichtbare element laadt. Voor de meeste pagina's is dat een hero-afbeelding of uitgelichte foto. Een 35% kleinere afbeelding vertaalt zich direct naar een snellere LCP-tijd. Bij de doorvoersnelheid van 1,6 Mbps die Lighthouse voor mobiel simuleert, bespaart 150 KB minder (1.200 kilobit) ongeveer 0,7 seconde downloadtijd voor die afbeelding.
Cumulative Layout Shift (CLS)
Hoewel CLS niet direct wordt beïnvloed door het afbeeldingsformaat, verkleinen sneller ladende afbeeldingen het venster waarin layoutverschuivingen kunnen optreden. Afbeeldingen die laden voordat de gebruiker begint te scrollen, hebben geen CLS-impact.
PageSpeed-score
Google Lighthouse raadt specifiek aan om afbeeldingen te serveren in "next-gen formats" (WebP, AVIF). Door de gemarkeerde afbeeldingen te converteren verdwijnt de audit "Serve images in next-gen formats" (nieuwere Lighthouse-versies melden dit binnen het inzicht Improve image delivery). Hoeveel de score verandert, hangt af van de pagina.
SEO-impact: Google heeft bevestigd dat Core Web Vitals een rankingsignaal zijn. Een snellere LCP door kleinere afbeeldingen kan je zoekrankings direct beïnvloeden, vooral op mobiel waar Google mobile-first indexering gebruikt.
Browserondersteuning in 2026
Browserondersteuning was ooit het belangrijkste argument tegen WebP, maar dat is nu echt verleden tijd. In 2026 toont elke huidige grote browser WebP native:
- Chrome: volledige ondersteuning vanaf versie 32 (2014)
- Firefox: ondersteund vanaf versie 65 (2019)
- Safari: ondersteund vanaf Safari 14 / macOS Big Sur / iOS 14 (2020)
- Edge: ondersteund vanaf versie 18 (2018)
- Opera: volledige ondersteuning vanaf versie 19 (2014)
De enige browser die WebP nooit ondersteunde is Internet Explorer, dat Microsoft officieel in 2022 heeft stopgezet. Voor de overgrote meerderheid van websites is het volkomen veilig om WebP te serveren zonder JPG-fallback. Als je nog steeds IE-verkeer ziet in je analytics, gebruik dan het HTML-element <picture> voor geleidelijke achteruitgang.
Google raadt WebP aan
Google bestraft JPG niet, maar zijn tools sturen wel aan op moderne formaten:
- PageSpeed Insights markeert JPG-afbeeldingen en raadt WebP of AVIF als vervanging aan
- Lighthouse bevat "Serve images in next-gen formats" als prestatieauditpunt
- Search Console Core Web Vitals-rapporten markeren pagina's met trage LCP, vaak veroorzaakt door grote JPG-afbeeldingen
- De eigen sites van Google gebruiken ook WebP; zo worden videominiaturen op YouTube als WebP geserveerd
Wanneer Google een technologie aanbeveelt en die ook gebruikt in hun eigen producten, is dat een sterk signaal dat adoptie zowel veilig als voordelig is.
WebP implementeren
Er zijn verschillende manieren om WebP-afbeeldingen te serveren, van eenvoudige HTML-wijzigingen tot volledig geautomatiseerde oplossingen:
Het picture-element (aanbevolen)
Het HTML-element <picture> laat je WebP serveren aan ondersteunde browsers met JPG als fallback:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Beschrijving" width="800" height="600">
</picture>Browsers die WebP ondersteunen laden het .webp-bestand. Oudere browsers negeren de <source>-tag en vallen terug op de JPG in de <img>-tag. Geef altijd expliciete width- en height-attributen op om layoutverschuivingen te voorkomen.
CDN-autoconversie
De eenvoudigste aanpak voor de meeste websites: laat je CDN de conversie afhandelen. Diensten zoals Cloudflare Polish, Cloudinary, imgix en AWS CloudFront kunnen browserondersteuning automatisch detecteren en WebP-versies van je afbeeldingen serveren. Geen codewijzigingen nodig — je uploadt JPG, de CDN serveert WebP aan ondersteunde browsers.
Batchconversie
Voor statische sites of het voorbereiden van bulkassets kun je je gehele afbeeldingbibliotheek in één keer converteren. cwebp (het commandoregelgereedschap van Google) en ImageMagick kunnen hele mappen verwerken; CleverUtils en Squoosh converteren één afbeelding tegelijk. Bewaar je JPG-originelen en genereer er WebP-kopieën naast.
Casestudy: typische websitebesparingen
Stel je een middelgrote e-commercesite voor met 500 productpagina's, elk met 5 productafbeeldingen van gemiddeld 200 KB in JPG:
| Statistiek | JPG | WebP |
|---|---|---|
| Afbeeldingen per pagina | 5 | 5 |
| Gemiddelde afbeeldingsgrootte | 200 KB | ~135 KB |
| Totaal afbeeldingsgewicht per pagina | 1.000 KB | ~675 KB |
| Maandelijkse paginaweergaven (100k) | 97,7 GB | ~65,9 GB |
| Maandelijks bespaarde bandbreedte | — | ~31,8 GB |
| Geschatte LCP-verbetering | — | 200–500 ms |
Met 100.000 maandelijkse paginaweergaven bespaart WebP meer dan 31 GB bandbreedte per maand. Bij hostingkosten van $0,08–$0,12 per GB is dat $2,50–$3,80 per maand aan bandbreedtebesparingen — zonder de SEO- en gebruikerservaringsvoordelen mee te tellen.
JPG vs. WebP: volledige vergelijking
| Kenmerk | JPG | WebP |
|---|---|---|
| Compressietype | Alleen lossy | Lossy en lossless |
| Typische bestandsgrootte | Uitgangswaarde | 25–35% kleiner |
| Transparantie | Niet ondersteund | 8-bits alfakanaal |
| Animatie | Niet ondersteund | Ondersteund (geanimeerde WebP) |
| Browserondersteuning | 100% | Alle moderne browsers |
| Kleurdiepte | 24-bits (8 per kanaal) | 24-bits + 8-bits alpha |
| Maximale resolutie | 65.535 × 65.535 px | 16.383 × 16.383 px |
| Metadata / EXIF | Volledig EXIF, IPTC, XMP | EXIF en XMP ondersteund |
| Tool-ondersteuning | Universeel | Meeste moderne editors |
| Google-aanbeveling | Nee (gemarkeerd in Lighthouse) | Ja ("next-gen format") |
Wanneer je NIET naar WebP moet overstappen
WebP is de juiste keuze voor de meeste webuse-cases, maar er zijn scenario's waarbij JPG nog steeds beter is:
- Drukproductie: Drukworkflows vereisen TIFF, PDF of hoge-kwaliteit JPG. WebP wordt niet herkend door de meeste druksoftware
- Archiefopslag: Voor langetermijnarchieven van foto's blijft JPG de veiligste keuze — 30+ jaar universele ondersteuning en een volwassen ecosysteem van tools
- E-mailcampagnes: Veel e-mailclients (Outlook, oudere Gmail-versies) renderen WebP nog steeds niet betrouwbaar. Gebruik JPG voor e-mailafbeeldingen
- Delen via social media: Hoewel de meeste platforms WebP-uploads inmiddels accepteren, zorgt converteren naar JPG voor maximale compatibiliteit wanneer gebruikers je afbeeldingen delen of downloaden
- Resolutielimieten: WebP heeft een maximale resolutie van 16.383 × 16.383 pixels. Voor zeer grote afbeeldingen (panorama's, hoge-res scans) ondersteunt JPG veel grotere afmetingen
Best practice: Bewaar je originele JPG-bestanden als bron. Genereer WebP-versies voor het serveren op het web. Als je later JPG nodig hebt (voor e-mail, druk of delen), heb je altijd het origineel.
Nadelen van WebP die de meeste gidsen overslaan
- Kleurdetail: lossy WebP gebruikt altijd 4:2:0-chroma-subsampling, waardoor fijn rood of blauw detail zachter kan worden; JPEG kan 4:4:4 gebruiken. De cwebp-optie
-sharp_yuvvermindert dit effect. - Alleen 8 bits: geen 10-bits kleur of HDR, in tegenstelling tot AVIF.
- Limiet van 16.383 pixels voor breedte en hoogte. CleverUtils verkleint grotere afbeeldingen automatisch zodat ze passen.
- Geen progressieve decodering: een WebP verschijnt pas als er genoeg van is geladen.
- Generatieverlies: een bestaande JPG naar WebP converteren comprimeert hem een tweede keer. Begin waar mogelijk bij het origineel.