PNG, JPEG of WebP: welk afbeeldingsformaat gebruik je?

De keuze voor een afbeeldingsformaat komt meestal neer op twee vragen. Heeft de afbeelding een transparante achtergrond of transparante delen nodig? En valt een beetje kwaliteitsverlies op? Beantwoord die twee en het formaat kiest zichzelf bijna. De derde vraag, waar het bestand naartoe gaat, bepaalt of de nieuwere formaten überhaupt zijn toegestaan, want marktplaatsen en veel apps accepteren nog steeds alleen JPEG en PNG.

Deze gids vergelijkt de vier formaten die je online het vaakst tegenkomt voor foto's en graphics: JPEG, PNG, WebP en AVIF. Aan het eind staat een snelle keuze voor de klussen die mensen meestal hebben: logo's, productfoto's, gewone foto's en uitsneden waarvan je de achtergrond hebt verwijderd.

De vergelijkingstabel

De details over de formaten komen uit de gids voor afbeeldingstypen van MDN. De rij over ondersteuning doet er voor browsers minder toe dan vroeger: elke huidige grote browser toont WebP, en AVIF wordt in recente versies van alle browsers ondersteund. Waar het nog wel uitmaakt, is overal daarbuiten, zoals uploadformulieren, marktplaatsen, e-mailprogramma's en oudere desktopsoftware.

Lossy en lossless, in gewone taal

Lossless compressie maakt een bestand kleiner zonder ook maar één pixel te veranderen. Decodeer je een PNG, dan krijg je precies terug wat is opgeslagen. Dat maakt het ideaal voor alles met harde randen en vlakke kleuren, zoals tekst, logo's, lijntekeningen, interfaces en screenshots, waar elke vervaging of gekleurde rand meteen opvalt.

Lossy compressie gooit details weg die het oog waarschijnlijk niet opmerkt. Foto's kunnen daar goed tegen, omdat ze vol ruis en geleidelijke tinten zitten. JPEG werkt zo, en met een redelijke kwaliteitsinstelling wordt een foto een fractie van zijn PNG-grootte zonder zichtbaar verschil.

Daar volgen twee praktische regels uit:

• Elke lossy opslag kost weer wat meer. Bewaar een lossless master (het origineel van de camera, een PNG of het eigen bestand van je editor) en exporteer daar lossy kopieën uit, in plaats van dezelfde JPEG steeds te bewerken en opnieuw op te slaan.
• Lossy compressie gaat het slechtst om met scherpe randen. Een logo dat als JPEG is opgeslagen, krijgt vlekkerige "muggenruis" rond de letters, en een screenshot krijgt wazige tekst.

Transparantie: doorslaggevend voor uitsneden

JPEG heeft geen alfakanaal. Je kunt in een JPEG niet opslaan dat een pixel doorzichtig is. Verwijder je een achtergrond en sla je op als JPEG, dan wordt het lege deel gevuld met een effen kleur, meestal wit of zwart. Wil je dat de uitsnede bovenop andere inhoud staat, dan heb je PNG, WebP of AVIF nodig.

PNG slaat een volledig alfakanaal op: elke pixel kan alles zijn van volledig dekkend tot volledig transparant. Daardoor blijven zachte randen zoals haar, vacht en schaduwen er natuurlijk uitzien. PNG heeft ook een eenvoudigere modus waarin één paletkleur als transparant is gemarkeerd. Dat is prima voor vlakke graphics, maar geeft gekartelde randen bij foto's. Wil je de details weten, lees dan wat een alfakanaal is.

WebP ondersteunt transparantie in zowel de lossless als de lossy modus. Volgens de WebP-documentatie van Google kost transparantie in lossless WebP ongeveer 22% meer bytes, en is lossy WebP met transparantie doorgaans zo'n 3 keer kleiner dan een vergelijkbare PNG. Daarmee is lossy WebP de efficiëntste manier om een transparante productfoto op je eigen website te zetten.

Bestandsgrootte

Voor dezelfde afbeelding is de volgorde van groot naar klein ruwweg PNG, JPEG, WebP, AVIF, met een grote kanttekening: PNG is alleen "groot" bij foto's. Bij vlakke graphics met weinig kleuren is PNG vaak kleiner dan JPEG en altijd scherper.

De gepubliceerde cijfers van Google voor WebP zijn een handig ijkpunt:

• Lossless WebP-bestanden zijn 26% kleiner dan PNG's.
• Lossy WebP-bestanden zijn 25 tot 34% kleiner dan vergelijkbare JPEG's bij dezelfde SSIM-kwaliteitsscore.

MDN adviseert voor rasterafbeeldingen op het web om WebP of AVIF te kiezen, die over het algemeen beter comprimeren dan PNG, JPEG en GIF. AVIF ondersteunt ook 10- en 12-bits kleur, wat helpt bij vloeiende overgangen. Het zwakke punt is ondersteuning buiten browsers: veel apps en uploadformulieren weigeren het nog.

Bestandsgrootte telt vooral als je veel afbeeldingen aan veel bezoekers toont. Bij één upload naar een marktplaats die toch alles opnieuw comprimeert, is het formaat dat de marktplaats accepteert belangrijker dan de bytes die je bespaart.

Waar elk formaat wordt geaccepteerd

Browsers zijn het makkelijke deel. Bij marktplaatsen en apps worden formaten geweigerd. Dit zijn de geaccepteerde formaten volgens de eigen documentatie van elk platform, gecontroleerd in oktober 2026:

Twee dingen vallen op. Ten eerste accepteren Amazon, Walmart en Meta-catalogi geen WebP en AVIF, dus houd JPEG of PNG aan voor uploads naar marktplaatsen. Ten tweede zegt Etsy dat transparante PNG's niet worden ondersteund en dat transparante delen zwart kunnen worden. Zet uitsneden daar dus eerst op een kleur voordat je ze uploadt. Voor de exacte pixelformaten per platform, zie het overzicht van productfotoformaten.

Welk formaat voor veelvoorkomende klussen

Logo's

Gebruik SVG als je een vectororigineel hebt; MDN raadt het aan voor logo's en pictogrammen. Heb je een rasterbestand nodig, gebruik dan PNG met een transparante achtergrond, of lossless WebP op je eigen site. Nooit JPEG: dat geeft wazige randen en kan niet transparant zijn.

Productfoto's

Gebruik voor hoofdafbeeldingen op marktplaatsen JPEG op een puur witte achtergrond. De verkopersblog van Amazon noemt JPEG het voorkeursformaat, en elke marktplaats in de tabel hierboven accepteert het. Exporteer met een hoge kwaliteitsinstelling (ongeveer 85 tot 92 in de meeste tools) vanuit een lossless master.

Upload in je eigen winkel een JPEG of PNG van hoge kwaliteit en laat het platform converteren. Shopify zegt bijvoorbeeld dat de afbeeldingsdienst elke bezoeker automatisch het beste formaat levert dat de browser ondersteunt.

Gewone foto's

JPEG is de veilige standaard voor delen en uploaden. Op een website die je zelf beheert, geeft WebP of AVIF met een JPEG als terugvaloptie hetzelfde beeld met minder bytes. Slaat je telefoon HEIC-bestanden op, zet ze dan om naar JPEG voordat je ze uploadt naar een plek die HEIC niet noemt.

Uitsneden en transparante afbeeldingen

Gebruik PNG als het bestand overal moet werken: in presentaties, documenten, ontwerptools en de meeste uploadformulieren. Gebruik WebP als je de afbeelding op je eigen webpagina zet en die klein wilt houden. Gebruik JPEG alleen als je de achtergrond bewust met een effen kleur hebt gevuld, bijvoorbeeld wit voor een marktplaats.

Screenshots en diagrammen

PNG of lossless WebP. Lossy formaten maken tekst wazig.

Moderne formaten aanbieden met een terugvaloptie

Heb je een eigen site, dan hoef je niet één formaat te kiezen. Met het HTML-element picture kiest de browser het eerste formaat dat hij begrijpt:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

Browsers die AVIF ondersteunen, nemen de eerste bron, andere vallen terug op WebP, en alles wat ouder is gebruikt de PNG. Veel hostingplatforms en image-CDN's doen deze conversie voor je op basis van de Accept-header van de browser. Dat is vaak eenvoudiger dan zelf elk formaat aanmaken.

Converteren zonder verrassingen

• PNG of WebP naar JPEG: transparante delen worden afgevlakt. Kies zelf de vulkleur (meestal wit) in plaats van de tool te laten kiezen, want sommige tools gebruiken standaard zwart.
• JPEG naar PNG: het bestand wordt groter, maar niet beter. De kwaliteit die in de JPEG verloren is gegaan, komt niet terug.
• Elk formaat naar WebP of AVIF: controleer of de transparantie behouden is en of de kleuren kloppen; zet de afbeelding eerst om naar het sRGB-kleurprofiel als die op het web wordt bekeken.
• JPEG's opnieuw opslaan: elke opslag met een lagere kwaliteit stapelt het verlies op. Exporteer één keer vanuit de master.

Sneller uitsneden maken

Wil je in bulk de achtergrond verwijderen, dan exporteert removebackground.dev de uitsnede als transparante PNG of WebP, of als JPG op elke effen kleur. Zo maak je vanuit dezelfde upload een JPEG op wit voor een marktplaats en een transparante PNG voor je site.