1. Startpagina
2. Afbeeldingsformaten

Afbeeldingsformaten vergeleken: JPEG, PNG, WebP en AVIF

Vier formaten dekken meer dan 99% van de afbeeldingen op het moderne web. Ze maken heel verschillende afwegingen tussen compressie, transparantie, animatie en browserondersteuning. Hier is een praktische gids om het juiste formaat te kiezen.

Vergelijking naast elkaar

Eerst een kort overzicht, daarna een volledige uitleg per formaat.

JPEG — de universele basis

Hoe het werkt

JPEG (Joint Photographic Experts Group) werd in 1992 gestandaardiseerd en is het oudste van de vier formaten. Het gebruikt een lossy discrete cosinustransformatie op 8×8-pixelblokken, gevolgd door kwantisatie en entropiecodering. Kwaliteit wordt met één getal van 1 tot 100 geregeld. Moderne encoders zoals MozJPEG halen 10–20% meer uit het formaat zonder de bitstream te veranderen, zodat elke JPEG-decoder ze kan lezen.

Het beste voor

Fotografische content met vloeiende tintverlopen en veel detail — portretten, landschappen, productfotografie, hero-afbeeldingen.

Voordelen

• Ondersteund door vrijwel elke image viewer ter wereld.
• Hardwareversneld decoderen bijna overal.
• Volwassen ecosysteem van optimalisatoren (MozJPEG, jpegli).

Nadelen

• Geen alfakanaal — achtergronden moeten worden afgevlakt.
• Blokartefacten op tekst, lijntekening en scherpe randen.
• Alleen 8 bits per kanaal.

PNG — lossless en transparant

Hoe het werkt

PNG (Portable Network Graphics) ontstond halverwege de jaren negentig als vrij van patenten alternatief voor GIF. Het is strikt lossless: DEFLATE-compressie bovenop per-rij pixelfiltering. Optimalisatoren zoals oxipng (de Rust-port van optipng) proberen elke filter-/compressiecombinatie om de kleinste representatie te vinden zonder een pixel te wijzigen.

Het beste voor

UI-graphics, pictogrammen, schermafbeeldingen, diagrammen, lijntekening, logo’s met vlakke kleuren en alles wat een echt alfakanaal nodig heeft.

Voordelen

• Lossless — pixels blijven intact na een rondtrip.
• Volledige 8-bit alpha, tot 16 bits per kanaal.
• Universeel ondersteund.

Nadelen

• Groot bij foto’s — vaak vele malen groter dan JPEG/WebP/AVIF.
• Geen animatie in de oorspronkelijke specificatie (APNG is een latere extensie).

WebP — het web-eerste formaat van Google

Hoe het werkt

WebP werd in 2010 door Google uitgebracht, gebaseerd op de VP8-videocodec en later uitgebreid met een aparte lossless modus. Het ondersteunt zowel lossy als lossless compressie in één container, met optionele alpha en animatie. In lossy modus verslaat het doorgaans JPEG met 25–35% bij gelijke kwaliteit. In lossless modus wint het vaak 20–30% ten opzichte van PNG.

Het beste voor

Algemeen webgebruik wanneer AVIF nog niet veilig is — foto’s, UI-sprites met transparantie, vervangingen voor geanimeerde GIF’s en als fallback onder AVIF.

Voordelen

• Eén formaat voor foto’s, graphics, alpha en animatie.
• Significant kleiner dan JPEG en PNG bij vergelijkbare kwaliteit.
• Brede ondersteuning: alle evergreen browsers sinds 2020.

Nadelen

• 8 bits per kanaal — geen HDR.
• Op sommige low-end apparaten langzamer te decoderen dan JPEG.

AVIF — de huidige leider in compressie

Hoe het werkt

AVIF (AV1 Image File Format) is een still-image-profiel van de AV1-videocodec, uitgebracht in 2019 door de Alliance for Open Media. Het ondersteunt tot 12-bit kleur, volledige alpha, HDR, brede kleurruimte en filmgrain-synthese. De referentie-encoder (aom-av1 gebruikt door libavif) is langzaam maar haalt de beste compressie voor echte wereldfoto’s.

Het beste voor

Hero-afbeeldingen, fotogalerijen en overal waar bandbreedte belangrijker is dan CPU-tijd. Werkt goed als bovenste laag in een <picture>-element.

Voordelen

• Beste compressie in zijn klasse — vaak 40–60% kleiner dan JPEG.
• Ondersteunt alpha, animatie, HDR, brede gamut en 10/12-bit diepte.
• Vrij van royalty’s en open.

Nadelen

• Langzaam te encoderen — plan build-time of async encoding.
• Safari voegde ondersteuning pas toe in versie 16 (2022).
• Minder geschikt voor synthetische graphics dan lossless WebP of PNG.

Welk formaat moet ik gebruiken?

• Foto’s, full-bleed hero’s: AVIF als primair formaat, WebP en JPEG als fallbacks via <picture>.
• UI-graphics met transparantie (pictogrammen, logo’s): PNG voor legacy-compatibiliteit, lossless WebP voor kleinere payloads.
• Lijntekening, screenshots, diagrammen: PNG (of lossless WebP) — JPEG/AVIF-artefacten zijn hard op scherpe randen.
• Geanimeerde GIF’s vervangen: WebP of AVIF — beide dramatisch kleiner en met echte alpha.
• Eén formaat voor elke browser, vandaag: JPEG voor foto’s, PNG voor graphics. Niet het kleinst, maar nul compatibiliteitsproblemen.

In de praktijk hoeft u niet één te kiezen. Serveer AVIF eerst, WebP tweede en JPEG of PNG laatst in een <picture>-element — elke browser krijgt de kleinste versie die hij kan decoderen.