WebP vs AVIF vs JPEG vs PNG: welk afbeeldingsformaat kies je en hoe verklein je bestanden?

In 2026 hebben alle vier formaten nog een duidelijke rol:

• AVIF wint meestal op bestandsgrootte bij foto’s en complexe beelden.
• WebP biedt een sterke balans tussen compressie, functies, compatibiliteit en implementatiekosten.
• JPEG blijft het veiligste fallbackformaat voor fotografie en onbekende systemen.
• PNG is vooral geschikt voor lossless rastergrafiek, UI-screenshots, pixelprecisie en nauwkeurige transparantie.

TL;DR: lever voor foto’s eerst AVIF, daarna WebP en houd JPEG als fallback. Vergelijk bij screenshots, simpele grafiek en transparantie lossless WebP of AVIF met PNG. Voor iconen en logo’s is SVG meestal beter dan deze rasterformaten.

Functies, compatibiliteit en aanbevelingen gecontroleerd op 23 juli 2026.

Belangrijkste verschillen

AVIF ondersteunt lossy en lossless compressie, transparantie, animatie, HDR en wide colour gamut. WebP combineert lossy en lossless modi, alfa en animatie. PNG is lossless en ondersteunt gedeeltelijke transparantie, maar is voor foto’s vaak te zwaar.

Snelle keuze per asset

Gebruik een beleid per type asset, niet één regel om alles naar AVIF te converteren.

1. JPEG: nog nuttig, maar zelden de beste hoofdkeuze

JPEG is ontworpen voor fotografie. Lossy compressie verwijdert informatie die het menselijk oog minder opmerkt. Daardoor worden foto’s veel kleiner dan PNG, maar te sterke compressie veroorzaakt zichtbare blokken, kleurverschuivingen en detailverlies.

Voordelen

• vrijwel universele compatibiliteit,
• betrouwbaar fallbackformaat,
• snel encoderen en decoderen,
• progressive JPEG,
• volwassen tooling zoals MozJPEG.

Progressive JPEG toont eerst een globale versie van de hele afbeelding en wordt vervolgens scherper. Het kan iets kleiner zijn dan baseline JPEG en voelt sneller op een trage verbinding.

Beperkingen

• geen alfa,
• geen animatie,
• destructieve compressie,
• snelle artefacten bij tekst, dunne lijnen en UI,
• kwaliteitsverlies bij herhaald opslaan,
• WebP en AVIF zijn vaak kleiner bij vergelijkbare kwaliteit.

Een officiële WebP-studie vond WebP-bestanden 25-34% kleiner dan JPEG bij vergelijkbare SSIM. Dit is geen garantie voor elk asset: bron, encoder, instellingen en meetmethode bepalen de uitkomst.

Wanneer JPEG kiezen?

• één bestand moet in zo veel mogelijk systemen werken,
• de ontvangende client is onbekend,
• gebruik in oudere CMS, e-mail, document of extern platform,
• fallback in <picture>,
• AVIF/WebP-pipeline is nog niet gereed.

Op een modern beheerd frontend horen moderne varianten meestal eerst te komen.

2. PNG: lossless kwaliteit, scherpte en transparantie tegen een prijs

PNG gebruikt lossless compressie en behoudt pixeldata. Het ondersteunt ook een alfakanaal met meerdere transparantieniveaus.

Voordelen

• zeer scherpe tekst, lijnen en UI,
• volledige alfatransparantie,
• geen generatieschade,
• universele compatibiliteit,
• goed rasterreferentieformaat.

Beperkingen

• foto’s zijn meestal veel groter dan JPEG, WebP of AVIF,
• klassieke PNG is niet geanimeerd; APNG is de animatievariant,
• raster schaalt minder goed dan SVG,
• metadata, kanalen of verkeerde paletten vergroten bestanden,
• transparantie alleen rechtvaardigt PNG niet altijd.

web.dev stelt dat PNG bijna nooit het juiste leveringsformaat voor fotografie is. Simpele semitransparante grafiek moet met WebP of AVIF worden vergeleken.

Wanneer blijft PNG sterk?

• screenshots met kleine tekst en dunne lijnen,
• lossless rasterkopie,
• platform accepteert PNG maar geen WebP/AVIF,
• klein kleurenpalet,
• exacte reproductie is belangrijker dan transfer,
• bron voor latere encodering.

Voor logo’s, iconen, diagrammen en simpele illustraties eerst SVG testen.

3. WebP: het praktischste standaardformaat

Google ontwikkelde WebP als efficiënter alternatief voor JPEG en voegde later lossless compressie, alfa en animatie toe. Het kan JPEG-foto’s, veel PNG-grafiek en sommige GIF-animaties vervangen.

Voordelen

• lossy en lossless,
• transparantie,
• animatie,
• brede ondersteuning in huidige browsers,
• volwassen CMS-, library- en CDN-ondersteuning,
• meestal kleiner dan JPEG of PNG,
• vaak eenvoudiger en sneller te encoderen dan AVIF.

Beperkingen

• geen progressieve weergave,
• sommige oudere systemen vragen JPEG of PNG,
• quality-getallen zijn niet vergelijkbaar tussen formaten,
• WebP is niet altijd kleiner dan AVIF,
• lossless WebP wint niet altijd van sterk geoptimaliseerde PNG.

Wanneer WebP kiezen?

• snel foto’s verkleinen zonder complexe pipeline,
• transparantie behouden,
• bijna alle actuele browsers bedienen,
• lokaal of on demand verwerken,
• aantal productieformaten beperken,
• kwaliteit, gewicht en encodeerkosten balanceren.

De POLPROG Afbeeldingsconverter en -optimalisator verwerkt PNG, JPG en WebP lokaal in de browser en ondersteunt conversie, compressie, resizing en het verwijderen van metadata.

4. AVIF: minimale transfer en moderne functies

AVIF is gebaseerd op AV1 en de HEIF-container. Het ondersteunt lossy en lossless compressie, alfa, animatie, HDR en een breed kleurbereik.

Voordelen

• zeer efficiënte compressie,
• goede kwaliteit bij lage bitrate,
• lossy en lossless,
• transparantie en animatie,
• 8-, 10- en 12-bit, HDR,
• ondersteuning in alle huidige grote browsers,
• sterk bij foto’s, verlopen en complexe beelden.

AVIF is sinds januari 2024 Baseline en wordt ondersteund door actuele versies van de belangrijkste browserengines.

Beperkingen

• geen progressieve weergave,
• encoderen kan duurder zijn dan JPEG of WebP,
• kwaliteit en grootte hangen sterk af van encoder, snelheid en subsampling,
• sommige externe platforms weigeren .avif,
• kleine assets kunnen groter zijn dan SVG, PNG of WebP,
• verkeerde instellingen kunnen texturen of kleine tekst verzachten.

MDN merkt op dat AVIF iets beter kan comprimeren dan WebP, maar geen progressieve rendering ondersteunt. Een vast besparingspercentage bestaat niet.

Wanneer AVIF inzetten?

• afbeeldingen vormen een groot deel van transfer,
• veel product- of hero-foto’s,
• geautomatiseerde pipeline beschikbaar,
• één keer encoderen en vaak leveren,
• HDR, wide gamut of grotere bitdiepte nodig,
• WebP/JPEG als fallback behouden.

5. Is AVIF altijd kleiner dan WebP?

Nee. web.dev noemt AVIF een sterke keuze voor fotocollecties, met WebP als moderne fallback en JPEG als betrouwbaarste standaard. De uitkomst hangt af van:

• inhoud en resolutie,
• ruis,
• tekst en dunne lijnen,
• lossy/lossless,
• bitdiepte en chroma subsampling,
• encoder en versie,
• snelheid,
• kwaliteitsmetriek.

Vergelijk bij dezelfde visuele kwaliteit, niet met dezelfde sliderwaarde. quality=75 betekent per formaat iets anders.

6. Core Web Vitals en LCP

Een modern formaat kan downloadtijd verkorten en het transferdeel van LCP verbeteren. Het lost late ontdekking, trage server, verkeerde afmetingen of JavaScript-rendering niet op.

Voor een LCP-afbeelding:

• geen loading="lazy",
• vroeg in HTML,
• eventueel fetchpriority="high",
• correcte width en height,
• juiste resolutie via srcset en sizes,
• minder redirects en afhankelijkheden,
• geen ongebruikte varianten downloaden.

web.dev raadt lazy loading af voor above-the-fold en LCP-afbeeldingen. fetchpriority="high" kan eerdere prioriteit geven.

Zie Website-audit in 2026 en Core Web Vitals in de praktijk.

7. Correcte implementatie met <picture>

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-800.avif 800w,
            /images/hero-1280.avif 1280w,
            /images/hero-1920.avif 1920w"
    sizes="100vw"
  >
  <source
    type="image/webp"
    srcset="/images/hero-800.webp 800w,
            /images/hero-1280.webp 1280w,
            /images/hero-1920.webp 1920w"
    sizes="100vw"
  >
  <img
    src="/images/hero-1280.jpg"
    srcset="/images/hero-800.jpg 800w,
            /images/hero-1280.jpg 1280w,
            /images/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="1080"
    fetchpriority="high"
    alt="Dashboard voor analyse van websiteprestaties"
  >
</picture>

De browser kiest de eerste ondersteunde <source>. AVIF staat dus vóór WebP en <img> levert de fallback.

Google vindt de afbeelding via src van <img>, ook binnen <picture>. JPEG, PNG, WebP en AVIF worden ondersteund.

Voor offscreen-afbeeldingen:

<img
  src="/images/example.webp"
  width="960"
  height="640"
  loading="lazy"
  decoding="async"
  alt="Vergelijking van afbeeldingsbestandsgrootte"
>

Gebruik lazy loading niet automatisch voor hero-, product- of LCP-afbeeldingen.

8. Responsive images zijn belangrijker dan formaat alleen

Een 2400 × 1600 AVIF blijft verspilling als een telefoon 360 px toont. Het juiste aantal pixels kan meer besparen dan een codecwissel.

Denk aan:

• breedtevarianten in srcset,
• correcte sizes,
• aparte mobiele uitsnede,
• hoge pixeldichtheid alleen waar zichtbaar,
• uploadlimieten in CMS,
• echte thumbnails in plaats van CSS-schaling.

Formaat, afmetingen en compressie zijn één systeem.

9. Kwaliteit eerlijk vergelijken

1. Begin met origineel of lossless bron.
2. Genereer meerdere kwaliteitsniveaus.
3. Bekijk op uiteindelijke weergavegrootte.
4. Controleer gezichten, haar, verlopen, tekst, randen en donkere delen.
5. Meet encodeer- en decodeerkosten.
6. Kies het kleinste acceptabele bestand.
7. Herhaal voor verschillende beeldcategorieën.

SSIM helpt, maar vervangt visuele controle niet.

10. Veelgemaakte fouten

Een al zwaar gecomprimeerde JPEG opnieuw encoderen

AVIF herstelt geen verloren detail. Gebruik origineel of lossless bron.

Eén kwaliteitswaarde voor alles

Portret, screenshot, nachtfoto en gradient reageren anders. Gebruik profielen of controles.

Geen afmetingen

Zonder width en height kan CLS ontstaan, ongeacht formaat.

Hero lazy laden

Zelfs een kleine AVIF komt te laat als hij pas na rendering wordt ontdekt of loading="lazy" krijgt.

Te veel varianten

Veel breedtes in vier formaten verhogen opslag en buildtijd. Genereer alleen nuttige varianten.

PNG voor elke transparantie

WebP en AVIF hebben ook alfa. Houd PNG als randen beter zijn, het bestand kleiner is of een platform het vereist.

Raster voor iconen en logo’s

SVG is meestal lichter, schaalbaar en stylebaar.

11. Afbeeldings-SEO

Google Search ondersteunt alle vier formaten. Er is geen gedocumenteerde rankingbonus voor .avif of .webp. Het voordeel is indirect via prestaties en UX.

Controleer ook:

• stabiele beschrijvende URL,
• extensie passend bij werkelijk type,
• juiste MIME,
• nuttige alt-tekst,
• zichtbare tekstcontext,
• toegang voor Googlebot,
• correcte afmetingen,
• image sitemap bij beeldrijke sites,
• licentiemetadata waar nodig.

Gebruik Websitestatuscontrole voor techniek en snelheid en Open Graph-voorvertoning voor social cards.

12. Aanbevolen beleid

Eenvoudig

• WebP als hoofdformaat,
• JPEG-fallback voor foto’s,
• PNG voor geselecteerde grafiek,
• SVG voor logo’s en iconen,
• srcset voor belangrijke beelden.

Optimaal

• AVIF eerst,
• WebP tweede,
• JPEG fallback,
• lossless WebP/AVIF of PNG voor screenshots,
• automatische breedtes,
• kwaliteits- en transferbudget,
• LCP- en RUM-monitoring.

E-commerce

• productfoto’s in AVIF en WebP,
• JPEG-fallback,
• aparte grote en thumbnailvarianten,
• zoom na interactie,
• kritieke foto niet lazy laden,
• textuur, kleur en transparantie testen,
• cache en image CDN.

Conclusie

AVIF is het sterkst wanneer minimale transfer prioriteit heeft en een goede pipeline bestaat. WebP is het beste algemene formaat voor eenvoud, compatibiliteit en compressie. JPEG blijft de veiligste fotofallback, terwijl PNG bewust moet worden gebruikt voor lossless grafiek en transparantie.

De strategie:

AVIF → WebP → JPEG

voor foto’s, en:

lossless AVIF/WebP ↔ PNG

voor scherpe of transparante assets na echte vergelijking.