WebP vs PNG en JPG: moderne beeldformaten voor het web

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. 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.

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 kost geen download.

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. 1

   Eerst de afmetingen

   Exporteer de foto op de grootste afmeting waarop hij echt wordt getoond. Een website-hero van 1920×1080 heeft nooit een origineel van 6000 pixels nodig.

2. 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. 3

   Maak kleinere versies

   Exporteer breedtes van 640, 1280 en 1920 pixels, zodat telefoons de kleine downloaden.

4. 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.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

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.

Waar PNG en JPG nog winnen

Socialemediaplatforms converteren uploads zelf en sommige weigeren WebP of verwerken het slecht. Ook linkvoorbeeld-crawlers verschillen, dus houd je Open Graph-afbeelding een PNG of JPG van 1200×630. En een WebP die naar een klant gaat, opent vaak in de verkeerde app of helemaal niet.

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.

# 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

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; voor het oudere duo PNG vs JPG; en voor de volledige checklist voor snelheid beelden optimaliseren voor het web.