# WebP vs PNG en JPG: moderne beeldformaten voor het web [Canonical HTML page](https://gradiently.design/nl/guide/webp-images) Je website hoeft niet dezelfde bestanden te serveren als die je op Instagram plaatst. WebP en AVIF doen hetzelfde werk als PNG en JPG in minder bytes, mits je ze goed instelt. ## The short version - WebP is een beeldformaat dat verliesgevend kan zijn zoals JPG of verliesvrij zoals PNG, en dat transparantie en animatie ondersteunt. - Bij een vergelijkbare beeldkwaliteit zijn WebP-bestanden meestal merkbaar kleiner dan hun JPG- en PNG-equivalenten. - Elke actuele versie van Chrome, Safari, Firefox en Edge ondersteunt WebP, dus een terugvaloptie is alleen nodig voor zeer oude browsers. - AVIF comprimeert verder dan WebP en wordt inmiddels breed ondersteund, maar het coderen gaat langzamer. - Houd PNG en JPG aan voor uploads naar socialemediaplatforms en voor bestanden die je naar mensen stuurt; gebruik WebP of AVIF op je eigen website. In de vraag **WebP vs PNG** en JPG wint WebP op je eigen website: het comprimeert als een JPG of verliesvrij als een PNG, ondersteunt transparantie en levert kleinere bestanden bij dezelfde beeldkwaliteit. Elke actuele browser ondersteunt het. PNG en JPG winnen nog overal buiten je site: uploads naar Instagram en LinkedIn, e-mailbijlagen, bestanden voor klanten en drukkers. De praktische regel is dus simpel. Maak en bewaar originelen als PNG, serveer WebP (of AVIF) aan bezoekers. ## Wat WebP is WebP is een beeldformaat dat door Google is ontwikkeld en beschreven op [web.dev](https://web.dev/articles/serve-images-webp). Eén formaat doet wat vroeger drie formaten nodig had: verliesgevende foto’s zoals JPG, verliesvrije beelden met transparantie zoals PNG en korte animaties zoals GIF. De besparing komt van slimmere compressie, die elk blok pixels voorspelt aan de hand van de buren en alleen het verschil opslaat. | Eigenschap | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Verliesgevend | Ja | Nee | Ja | Ja | | Verliesvrij | Nee | Ja | Ja | Ja | | Transparantie | Nee | Ja | Ja | Ja | | Animatie | Nee | Beperkt (APNG) | Ja | Ja | | Browserondersteuning | Overal | Overal | Alle actuele browsers | Alle actuele browsers | | Geaccepteerd door socialemediaplatforms | Ja | Ja | Wisselend | Zelden | Controleer de actuele ondersteuning op [caniuse.com](https://caniuse.com/webp) als je publiek oude apparaten gebruikt. ## WebP vs PNG voor beelden en transparantie Voor logo’s, interfacebeelden en uitgeknipte objecten behoudt verliesvrij WebP elke pixel zoals PNG en is het meestal kleiner. Verliesgevend WebP met transparantie is de grotere winst: een uitgeknipt product met een zachte, doorzichtige rand kan een fractie van de PNG-grootte zijn zonder zichtbaar verschil. Kleurverlopen zijn de uitzondering waar je op moet letten. Een vloeiend donker verloop kan in verliesgevend WebP gaan banden, net als in JPG. Bestaat je hero-afbeelding grotendeels uit verloop, vergelijk dan verliesgevend op hoge kwaliteit met verliesvrij en overweeg of het wel een afbeelding moet zijn: een [CSS-verloop](https://gradiently.design/nl/guide/css-linear-gradient) kost geen download. - Donkerblauw: test verliesvrij: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Zachtroze: verliesgevend, hoge kwaliteit: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Fel, drie kleuren: verliesgevend kan: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Donkere, subtiele verlopen laten compressie als eerste zien; felle, drukke verbergen die. Kies WebP-instellingen op basis van de inhoud, niet uit gewoonte. ## WebP vs JPG voor foto’s Voor foto’s komt verliesgevend WebP op een kwaliteit van ongeveer 75 tot 80 meestal overeen met een JPG op 85, en is het kleiner. Het verschil telt op bij pagina’s met veel beelden: productoverzichten, portfolio’s, blogs. Bij één hero-foto is de winst echt maar minder spectaculair, en dan telt het juiste aantal pixels zwaarder dan het formaat. 1. **Eerst de afmetingen** Exporteer de foto op de grootste afmeting waarop hij echt wordt getoond. Een [website-hero](https://gradiently.design/nl/guide/website-hero-background) van 1920×1080 heeft nooit een origineel van 6000 pixels nodig. 2. **Kies een kwaliteit** Begin met verliesgevend WebP op 80. Bekijk huid, luchten en donkere hoeken op 100% zoom, ga dan omlaag tot er iets verandert en ga één stap terug. 3. **Maak kleinere versies** Exporteer breedtes van 640, 1280 en 1920 pixels, zodat telefoons de kleine downloaden. 4. **Serveer met srcset** Laat de browser de juiste breedte kiezen met `srcset` en `sizes`, zoals in de code hieronder. ## AVIF vs WebP AVIF is nieuwer en comprimeert meestal verder dan WebP, vooral bij foto’s en vloeiende tinten. Het wordt ondersteund in alle actuele grote browsers. De keerzijde is langzamer coderen, wat uitmaakt als je beelden direct converteert, en minder programma’s die het openen. Veel sites serveren AVIF eerst, WebP als tweede en JPG als laatste, en laten de browser het eerste nemen dat hij begrijpt. ```html Evening light over the harbour ``` De browser gebruikt de eerste `source` die hij ondersteunt en valt terug op de `img`. De breedte en hoogte voorkomen dat de lay-out verspringt tijdens het laden. Gebruik je een framework of een beeld-CDN, dan doet dat dit misschien allemaal automatisch vanuit één geüpload origineel. Controleer wat het oplevert voordat je iets met de hand converteert. > **Geanimeerd WebP en GIF** Geanimeerd WebP is veel lichter dan GIF en behoudt volle kleur, dus het past bij kleine herhalende beelden op een pagina. Voor alles wat langer duurt dan een paar seconden is een gedempte MP4- of WebM-video nog lichter. [GIF vs MP4](https://gradiently.design/nl/guide/gif-vs-mp4) vergelijkt ze in detail. ## Waar PNG en JPG nog winnen ### Gebruik WebP of AVIF - Beelden op je eigen website - Productoverzichten en galerijen - Blog- en artikelbeelden - Transparante uitknipsels op het web ### Gebruik PNG of JPG - Uploads naar Instagram, LinkedIn, X en Facebook - Open Graph-afbeeldingen voor linkvoorbeelden - Bestanden die je mailt of naar klanten stuurt - Originelen die je opnieuw gaat bewerken Socialemediaplatforms converteren uploads zelf en sommige weigeren WebP of verwerken het slecht. Ook linkvoorbeeld-crawlers verschillen, dus houd je [Open Graph-afbeelding](https://gradiently.design/nl/guide/open-graph-image-size) een PNG of JPG van 1200×630. En een WebP die naar een klant gaat, opent vaak in de verkeerde app of helemaal niet. Een breed linkvoorbeeld dat een lentecollectie aankondigt op een kleurverloopachtergrond Een linkvoorbeeld van 1200×630. Houd dit als PNG, zodat de crawler van elk platform het kan lezen. ## Zo converteer je PNG naar WebP Het gratis opdrachtregelprogramma `cwebp` van Google converteert één bestand of een hele map, en de meeste beeldeditors en ontwerpprogramma’s exporteren nu direct naar WebP. ```bash # lossy, good for photos cwebp -q 80 photo.png -o photo.webp # lossless, good for logos and interface graphics cwebp -lossless logo.png -o logo.webp # a whole folder for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done ``` Bewaar de PNG-originelen. WebP terugzetten naar PNG herstelt geen detail dat door verliesgevende compressie is verloren. Je ontwerporiginelen kunnen PNG blijven: Gradiently exporteert ontwerpen als PNG en JPG, de juiste invoer voor deze stap en de juiste bestanden voor elke socialemedia-upload. Voor de redenering achter kwaliteitsinstellingen lees je [beeldcompressie zonder je verlopen te verpesten](https://gradiently.design/nl/guide/image-compression); voor het oudere duo [PNG vs JPG](https://gradiently.design/nl/guide/png-vs-jpeg); en voor de volledige checklist voor snelheid [beelden optimaliseren voor het web](https://gradiently.design/nl/guide/lighthouse-image-performance). ## FAQ ### Is WebP beter dan PNG? Op een website meestal wel: verliesvrij WebP behoudt dezelfde pixels in een kleiner bestand en ondersteunt transparantie. Voor uploads naar social media en bestanden die je naar mensen stuurt is PNG veiliger, omdat het overal opent. ### Ondersteunen alle browsers WebP? Alle actuele versies van Chrome, Safari, Firefox en Edge ondersteunen WebP. Gebruik een `picture`-element met een JPG- of PNG-terugvaloptie als je zeer oude browsers wilt bereiken. ### Moet ik AVIF of WebP gebruiken? AVIF is meestal kleiner, WebP codeert sneller en wordt door meer programma’s ondersteund. Als je eerst AVIF serveert met WebP als terugval, krijgen de meeste bezoekers het kleinste bestand. ### Kan ik WebP uploaden naar Instagram? De ondersteuning wisselt, dus upload liever PNG of JPG op het exacte formaat, zoals 1080×1350 voor een staande post. ### Ondersteunt WebP transparantie? Ja, in zowel de verliesgevende als de verliesvrije modus, waardoor het een goede vervanger is voor transparante PNG’s op het web.