Beste Afbeeldingsindeling voor Web 2026:
JPG vs PNG vs WebP vs AVIF

Beste afbeeldingsformaat voor het web: het korte antwoord

• Foto's: AVIF of WebP, met JPEG als fallback.
• Logo's en pictogrammen: SVG; PNG of lossless WebP als u een rasterbestand nodig hebt.
• Schermafbeeldingen en graphics met tekst: PNG of lossless WebP.
• Afbeeldingen voor e-mail en delen op sociale media: JPEG of PNG, omdat e-mailclients en linkvoorbeelden WebP of AVIF niet betrouwbaar tonen.

De 4 kandidaten in 2026

Het landschap van webafbeeldingsformaten is sterk veranderd sinds de begintijd van GIF en JPEG. In 2026 domineren vier formaten:

• JPEG (1992) — Het 34 jaar oude werkpaard. Nog altijd het meest universeel ondersteunde afbeeldingsformaat op internet. Gebruikt lossy DCT-compressie die is geoptimaliseerd voor foto's.
• PNG (1996) — De lossless standaard voor graphics. Ondersteunt alfatransparantie, behoudt elke pixel en blinkt uit bij tekst, pictogrammen en schermafbeeldingen.
• WebP (2010) — Het moderne alternatief van Google dat zowel lossy als lossless compressie, transparantie en animatie ondersteunt. Levert 25–34% kleinere bestanden dan JPEG.
• AVIF (2019) — De nieuwste kandidaat, gebaseerd op de AV1-videocodec. Levert ~50% kleinere bestanden dan JPEG, met een betere weergave van gradiënten en ondersteuning voor HDR.

Elk formaat heeft zijn eigen sterke punten. De juiste keuze hangt af van het type inhoud, uw doelgroep en uw prestatiedoelen.

Uitgebreide vergelijkingstabel

JPEG — De standaard voor foto's

JPEG is sinds midden jaren negentig het dominante afbeeldingsformaat op het web. Het is speciaal ontworpen voor foto's, en 34 jaar later is het nog steeds het meest universeel compatibele afbeeldingsformaat dat er bestaat.

Sterke punten

• Universele ondersteuning: Elke browser, e-mailclient, elk CMS, socialemediaplatform, elke afbeeldingsviewer en elk besturingssysteem ondersteunt JPEG. Geen enkel formaat komt qua compatibiliteit in de buurt.
• Uitstekende compressie voor foto's: Bij fotografische inhoud haalt JPEG compressieverhoudingen van 10:1 tot 20:1, met een kwaliteit die de meeste kijkers niet van het origineel kunnen onderscheiden.
• Snel coderen en decoderen: JPEG-compressie is rekenkundig eenvoudig. Zelfs zuinige mobiele apparaten coderen en decoderen JPEG's direct.
• Volwassen tools: Elke afbeeldingseditor, elke opdrachtregeltool en elke programmeerbibliotheek ondersteunt JPEG. Optimalisatietools zoals mozjpeg en jpegtran zijn sterk verfijnd.
• Progressief laden: Een progressieve JPEG toont direct een voorbeeld in lage resolutie en verfijnt dat tot volledige kwaliteit naarmate de gegevens binnenkomen. Gebruikers zien de inhoud sneller.

Zwakke punten

• Geen transparantie: JPEG ondersteunt geen alfakanalen. Afbeeldingen met transparante delen moeten een effen achtergrondkleur krijgen, wat de flexibiliteit bij het combineren van beelden beperkt.
• Alleen lossy: Er is geen lossless JPEG-modus voor webgebruik. Bij elke keer opslaan gaan gegevens verloren, en dat generatieverlies stapelt zich op bij meerdere bewerkingen.
• Kleurbanden in gradiënten: Bij lagere kwaliteitsinstellingen ontstaan in vloeiende gradiënten (lucht, studioachtergronden) zichtbare trapjes — het duidelijkste artefact van JPEG.
• Blokartefacten: JPEG verwerkt afbeeldingen in blokken van 8×8 pixels. Bij agressieve compressie worden de bloksgrenzen zichtbaar als een rasterpatroon.

Het best voor

Foto's waarbij universele compatibiliteit belangrijker is dan de kleinst mogelijke bestandsgrootte. E-mailnieuwsbrieven, OG-afbeeldingen voor sociale media, miniaturen in RSS-feeds en elke situatie waarin u ondersteuning voor WebP of AVIF niet kunt garanderen.

PNG — De standaard voor graphics

PNG werd in 1996 gemaakt als patentvrije vervanger van GIF. Het werd al snel de webstandaard voor niet-fotografische afbeeldingen en is nog steeds het standaardformaat voor graphics, pictogrammen en elke afbeelding die transparantie of pixelperfecte kwaliteit nodig heeft.

Sterke punten

• Lossless compressie: PNG behoudt elke pixel precies zoals in het origineel. Geen compressieartefacten, geen generatieverlies en geen kwaliteitsverlies, hoe vaak u ook bewerkt en opslaat.
• Alfatransparantie: Een volledig 8-bits alfakanaal met 256 transparantieniveaus. Onmisbaar voor logo's, pictogrammen en overlays die netjes over elke achtergrond moeten vallen.
• Perfect voor tekst en scherpe randen: UI-elementen, schermafbeeldingen, diagrammen, codefragmenten en elke afbeelding met scherpe grenzen. Waar JPEG wazige halo's rond tekst veroorzaakt, geeft PNG die perfect weer.
• Kleine bestanden voor eenvoudige graphics: Afbeeldingen met grote vlakken effen kleur, een beperkt kleurenpalet en geometrische vormen worden als PNG vaak kleiner dan als JPEG, omdat de voorspellingsfilters en DEFLATE van PNG herhalende patronen heel efficiënt verwerken.
• Universele ondersteuning: Net als JPEG werkt PNG in elke browser, e-mailclient en afbeeldingseditor.

Zwakke punten

• Grote bestanden voor foto's: Een foto van 12 MP is als PNG doorgaans 15–25 MB, tegenover 2–4 MB als JPEG Q85. Lossless compressie kan bij fotografische inhoud simpelweg niet tippen aan lossy compressie.
• Geen native animatie: APNG bestaat, maar wordt wisselend ondersteund en is veel minder efficiënt dan animatie in WebP of AVIF. Voor eenvoudige animaties wordt GIF nog altijd vaker gebruikt.
• Geen progressieve weergave: PNG-bestanden moeten volledig zijn gedownload voordat ze in volledige resolutie kunnen worden getoond. Interlaced PNG bestaat, maar maakt het bestand groter en wordt zelden gebruikt.

Het best voor

Logo's, pictogrammen, UI-elementen, schermafbeeldingen, diagrammen, pixelart en elke afbeelding met transparantie, tekst of scherpe randen waarvoor lossless kwaliteit vereist is. Ook het beste archiefformaat voor bronafbeeldingen vóór een lossy conversie.

WebP — De moderne allrounder

Google bracht WebP in 2010 uit om de beperkingen van zowel JPEG als PNG aan te pakken. Na jaren van geleidelijke adoptie door browsers bereikte WebP een kritische massa toen Safari in versie 14 (2020) ondersteuning toevoegde. In 2026 ligt de ondersteuning voor WebP boven 96% van alle browsers wereldwijd.

Compressievoordeel

De compressieverbeteringen van WebP ten opzichte van oudere formaten zijn goed gedocumenteerd:

• Lossy WebP vs JPEG: 25–34% kleiner bij gelijkwaardige visuele kwaliteit (gemeten met SSIM). Deze cijfers komen uit de compressiestudie van Google naar WebP.
• Lossless WebP vs PNG: gemiddeld ~26% kleiner. Het voordeel verschilt per inhoud — eenvoudige graphics winnen meer, complexe foto's minder.

Dit zijn geen theoretische cijfers. Voor een website met 1 MB aan JPEG-afbeeldingen bespaart overstappen naar WebP 250–340 KB per paginalading. Bij duizenden bezoekers per dag is de winst in bandbreedte en snelheid aanzienlijk.

Functies

• Lossy + lossless in één formaat: Gebruik lossy voor foto's en lossless voor graphics. U hoeft niet te kiezen tussen twee verschillende formaten voor verschillende soorten inhoud.
• Alfatransparantie: Een volledig alfakanaal in zowel de lossy als de lossless modus. Lossy WebP met transparantie is aanzienlijk kleiner dan PNG — ideaal voor productfoto's op een transparante achtergrond.
• Animatie: WebP-animatie vervangt geanimeerde GIF's met veel kleinere bestanden (vaak 50–80% kleiner). Ondersteunt 24-bits kleur in plaats van het palet van 256 kleuren van GIF.
• Snel coderen: WebP codeert snel genoeg voor directe conversie in CDN-pipelines en buildprocessen.

Browserondersteuning in 2026

De resterende ~4% zonder WebP-ondersteuning bestaat vooral uit oudere iOS-apparaten (vóór iOS 14), achterblijvers met Internet Explorer 11 en verouderde zakelijke browsers. Voor de meeste websites is dat een verwaarloosbaar aandeel dat eenvoudig wordt opgevangen met JPEG/PNG-fallbacks.

Het best voor

Webafbeeldingen voor algemeen gebruik in 2026. WebP is de veiligste keuze als "modern formaat" — het biedt flink betere compressie dan JPEG en PNG, met een browserondersteuning die zo hoog is dat fallbacks alleen voor uitzonderingen nodig zijn.

AVIF — De volgende generatie

AVIF, gebaseerd op de royaltyvrije AV1-videocodec, verscheen in 2019 als de volgende stap in afbeeldingscompressie. Het levert de beste compressieverhoudingen van alle breed ondersteunde formaten en voegt mogelijkheden toe die oudere formaten missen.

Compressievoordeel

• AVIF vs JPEG: Ongeveer 50% kleiner bij gelijkwaardige visuele kwaliteit. Het voordeel is het grootst bij foto's met vloeiende gradiënten, waar AVIF de kleurbanden voorkomt die JPEG parten spelen.
• AVIF vs WebP: Ongeveer 20% kleiner voor lossy fotografische inhoud. Het verschil wordt kleiner bij lossless inhoud en eenvoudige graphics.
• Betere weergave van gradiënten: AVIF gebruikt grotere transformatieblokken (tot 64×64) en geavanceerdere voorspellingsmodi dan de 8×8-DCT van JPEG. Daardoor verdwijnen de blok- en bandartefacten die de grootste zwakte van JPEG zijn.

Functies naast compressie

• HDR en breed kleurengamma: 10-bits en 12-bits kleurdiepte, de kleurruimte Rec. 2020 en de overdrachtsfuncties PQ/HLG. Van de breed ondersteunde webformaten heeft AVIF de meest complete HDR-ondersteuning.
• Synthese van filmkorrel: De encoder kan filmkorrel in de bron analyseren en verwijderen, en de decoder vervolgens opdracht geven die opnieuw te synthetiseren. Dat verkleint de bestandsgrootte van korrelige beelden drastisch, zonder dat de waargenomen textuur verandert.
• Alfatransparantie: Volledige ondersteuning voor een alfakanaal in zowel de lossy als de lossless modus, net als WebP.
• Animatie: AVIF-sequenties (afgeleid van AV1-video) zijn uiterst efficiënt voor korte animaties.

Beperkingen

• Coderingssnelheid: AVIF coderen is 5–20x trager dan JPEG of WebP coderen. Daardoor is directe conversie voor sommige toepassingen onpraktisch. Vooraf coderen tijdens het buildproces is de standaardaanpak.
• Browserondersteuning (~93%): Safari voegde AVIF-ondersteuning toe in versie 16.4 (2023), maar oudere versies van macOS en iOS ondersteunen het niet. Ondersteuning in Android WebView hangt af van het apparaat. De kloof wordt kleiner, maar is nog steeds merkbaar.
• Maximale afmetingen: Sommige AVIF-implementaties hebben beperkingen voor de tegelgrootte. Zeer grote afbeeldingen (bijv. panorama's van 8000×6000 px) moeten mogelijk in tegels worden opgedeeld of worden niet door alle decoders ondersteund.
• Volwassenheid van tools: De tools voor AVIF verbeteren snel, maar zijn nog niet zo volwassen als die voor JPEG of WebP. Sommige afbeeldingseditors en CMS-platforms ondersteunen AVIF nog niet volledig.

Het best voor

Topprestaties voor websites die laadsnelheid vooropstellen en een fallbackketen met meerdere formaten kunnen implementeren. Vooral effectief voor sites met veel foto's, waar de besparing van 50% ten opzichte van JPEG een flinke vermindering van de bandbreedte oplevert.

De aanbeveling voor 2026 — Een strategie met meerdere formaten

Geen enkel formaat is in elke situatie optimaal. De moderne best practice is een progressieve fallbackketen met het HTML-element <picture>:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Beschrijving" width="800" height="600" loading="lazy">
</picture>

De browser bekijkt de bronnen van boven naar beneden en gebruikt het eerste formaat dat hij ondersteunt:

1. AVIF — geleverd aan ~93% van de browsers. Kleinste bestand, beste kwaliteit.
2. WebP — geleverd aan de ~3% die WebP wel ondersteunt, maar AVIF niet. Nog steeds aanzienlijk kleiner dan JPEG.
3. JPEG — geleverd aan de ~4% die geen van beide moderne formaten ondersteunt. Universele fallback.

Snelle keuzehulp per type inhoud

Impact op Core Web Vitals

De Core Web Vitals (CWV) van Google meten direct de gebruikerservaring, en afbeeldingen spelen een centrale rol in alle drie de statistieken:

Largest Contentful Paint (LCP)

LCP meet hoe snel het grootste zichtbare inhoudselement wordt weergegeven. Op de meeste pagina's is dat de hero-afbeelding of bannerfoto. De drempel van Google: minder dan 2,5 seconde voor een "goede" score.

Kleinere afbeeldingen laden sneller. Een hero-afbeelding van 200 KB in JPEG vervangen door een WebP van 130 KB (35% besparing) of een AVIF van 100 KB (50% besparing) verkort de LCP-tijd direct. Op een mobiele 4G-verbinding (~10 Mbps) scheelt 100 KB besparen ongeveer 0,08 seconde. Op een 3G-verbinding (~1,5 Mbps) levert dezelfde besparing 0,5 seconde op — en dat kan het verschil zijn tussen een LCP-score "goed" en "moet beter".

Cumulative Layout Shift (CLS)

CLS meet onverwachte verschuivingen in de lay-out. Afbeeldingen zonder expliciete attributen width en height veroorzaken lay-outverschuivingen wanneer ze laden en de inhoud omlaag duwen. Geef altijd de afmetingen op:

<!-- Geef altijd width en height op om CLS te voorkomen -->
<img src="photo.webp" alt="..." width="800" height="600" loading="lazy">

Interaction to Next Paint (INP)

INP meet hoe snel een pagina reageert op interacties van gebruikers. Het afbeeldingsformaat heeft weinig directe invloed op INP. Browsers decoderen afbeeldingen meestal buiten de main thread; AVIF decodeert trager dan JPEG, maar dat heeft zelden invloed op de responsiviteit.

Typische benchmarks voor bestandsgrootte

Om de praktische verschillen te laten zien, volgen hier typische bestandsgroottes voor een foto van 1920×1080, gecodeerd met visueel gelijkwaardige kwaliteit:

Voor een webpagina met 10 foto's van 1920×1080:

• JPEG: ~4 MB aan afbeeldingen in totaal
• WebP: ~2,8 MB (−30%)
• AVIF: ~2,1 MB (−48%)

Het verschil van 1,9 MB kost op een mobiele verbinding van 10 Mbps ongeveer 1,5 seconde extra downloadtijd (1,9 MB × 8 ÷ 10 Mbps).

Praktische migratiegids

Klaar om de afbeeldingen van uw website te moderniseren? Zo pakt u het stap voor stap aan:

Stap 1: Breng uw huidige afbeeldingen in kaart

Voer Google Lighthouse uit op uw belangrijkste pagina's. Zoek naar de suggesties voor het leveren van afbeeldingen (in oudere versies heet dat "Serve images in next-gen formats"). Noteer welke afbeeldingen worden gemarkeerd en hoe groot ze nu zijn.

Stap 2: Converteer bestaande afbeeldingen

Converteer losse afbeeldingen met CleverUtils, één bestand per upload. Voor veel bestanden gebruikt u de opdrachtregel:

# Converteer alle JPEG's naar lossy WebP (kwaliteit 85)
for f in *.jpg; do
  convert "$f" -quality 85 -define webp:lossless=false "${f%.jpg}.webp"
done

# Converteer alle PNG's naar lossless WebP
for f in *.png; do
  convert "$f" -define webp:lossless=true "${f%.png}.webp"
done

# Maak AVIF-versies (trager, betere compressie)
for f in *.jpg; do
  avifenc "$f" -s 6 -q 65 "${f%.jpg}.avif"
done

Stap 3: Implementeer het picture-element

Vervang <img>-tags door <picture>-elementen met fallbacks per formaat. Houd de originele JPEG of PNG aan als laatste <img>-bron voor maximale compatibiliteit.

<!-- Voor: één JPEG -->
<img src="hero.jpg" alt="Hero-afbeelding" width="1200" height="630">

<!-- Na: progressieve fallback -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero-afbeelding" width="1200" height="630" loading="lazy">
</picture>

Stap 4: Configureer uw CDN

Veel CDN's (Cloudflare, Fastly, AWS CloudFront) ondersteunen automatische onderhandeling over het afbeeldingsformaat via de header Accept. Het CDN herkent welke formaten de browser ondersteunt en levert automatisch de optimale versie, zonder <picture>-elementen in uw HTML.

Stap 5: Neem het op in uw buildpipeline

Automatiseer voor nieuwe afbeeldingen de formaatconversie in uw buildproces. Tools zoals sharp (Node.js), Pillow (Python) en ImageMagick kunnen tijdens de deployment WebP- en AVIF-varianten genereren.

Speciale gevallen — Wanneer de regels anders zijn

Als u transparantie nodig hebt

Als uw afbeelding transparante delen nodig heeft (logo's op wisselende achtergronden, vrijstaande productfoto's, overlays), worden de opties beperkter:

• Beste: Lossy WebP met alfa — veel kleiner dan PNG, met behoud van transparantie.
• Ook goed: AVIF met alfa — nog kleiner, maar controleer de browserondersteuning bij uw doelgroep.
• Fallback: PNG — universele ondersteuning, grotere bestanden, maar werkt gegarandeerd overal.
• Niet mogelijk: JPEG — ondersteunt helemaal geen transparantie.

Wanneer SVG alles verslaat

Voor logo's, pictogrammen en illustraties met geometrische vormen is SVG (Scalable Vector Graphics) beter dan alle rasterformaten. SVG-bestanden zijn doorgaans 1–10 KB, schalen naar elke resolutie zonder kwaliteitsverlies en zijn op te maken met CSS. Als uw graphic als vectoren kan worden weergegeven, is SVG altijd het antwoord.

E-mail en sociale media

E-mailclients staan erom bekend dat ze moderne formaten slecht ondersteunen. Outlook, Gmail (in sommige situaties), Apple Mail en Thunderbird ondersteunen WebP wisselend en AVIF vrijwel niet. Voor e-mailnieuwsbrieven en HTML-e-mailtemplates is JPEG nog steeds de enige veilige keuze.

Socialemediaplatforms (Facebook, Twitter, LinkedIn) accepteren in 2026 WebP-uploads, maar leveren in veel situaties nog JPEG. Open Graph-metatags og:image moeten naar JPEG of PNG verwijzen voor maximale compatibiliteit met crawlers.

Waarom vinden mensen WebP niet fijn?

• Opgeslagen afbeeldingen openen niet overal. Oudere desktopapps en sommige afbeeldingsviewers kunnen een gedownload .webp-bestand nog steeds niet openen.
• Ondersteuning in editors kwam laat. Sommige editors en kantoorapps hebben WebP pas onlangs toegevoegd, dus bestanden moeten vaak eerst worden geconverteerd.
• Terugconverteren kost kwaliteit. Een lossy WebP omzetten naar JPG comprimeert de afbeelding een tweede keer.
• Onduidelijk formaat. Gebruikers kunnen vaak niet zien of een WebP-bestand lossy of lossless is.