Beeldformaten vergeleken: JPG vs PNG vs WebP vs AVIF (2026)

Het beeldformaat dat je kiest, beïnvloedt paginalaadtijd, SEO-ranking (Core Web Vitals), bandbreedtekosten, visuele kwaliteit, browsercompatibiliteit en toegankelijkheid. In 2026 is het antwoord niet langer “gewoon JPG gebruiken”, moderne formaten besparen 50-70% aan bestandsgrootte bij gelijke kwaliteit.

Deze gids vergelijkt de vier formaten die er vandaag toe doen: JPG, PNG, WebP, AVIF. Plus een notitie over HEIC (Apple), TIFF (print) en SVG (vector).

Snelle referentietabel

Formaat	Compressie	Transparantie	Animatie	Browserondersteuning (2026)	Beste voor
JPG	Lossy	nee	nee	100%	Foto’s, e-mail, max compatibiliteit
PNG	Lossless	ja	nee	100%	Logo’s, pictogrammen, screenshots
WebP	Lossy of lossless	ja	ja	96%	Modern web (default in 2026)
AVIF	Lossy of lossless	ja	ja	92%	Performance-kritisch web
HEIC	Lossy	ja	ja	Alleen iOS/macOS	Apple-apparaatopslag
GIF	Lossless	Alleen 1-bit	ja	100%	Alleen legacy-animaties
SVG	Lossless vector	ja	ja	100%	Logo’s, pictogrammen, illustraties (elk formaat)

JPG (JPEG)

Geboren in 1992. Universeel ondersteund. Lossy compressie met kwaliteitsschuif (1-100). Op kwaliteit 75-85 niet te onderscheiden van het origineel voor het menselijk oog terwijl het 5-10× kleiner is dan de bron-RAW.

Sterke punten:

• Universele compatibiliteit (letterlijk overal).
• Kleine bestanden voor foto’s.
• Volwassen, goed begrepen compressie.

Zwakke punten:

• Geen transparantie (moet effen achtergrond gebruiken).
• Compressieartefacten op lage kwaliteit (blokkerigheid, halo’s).
• Geen animatie.
• Oudere standaard, vervangen voor modern web.

Gebruik wanneer: foto’s e-mailen, naar oude systemen sturen, max compatibiliteit van belang is, geen transparantie nodig.

PNG (Portable Network Graphics)

Geboren in 1996. Lossless compressie. Twee varianten: PNG-8 (256 kleuren, GIF-vervanging) en PNG-24 (16 miljoen kleuren, foto-kwaliteit). Beide ondersteunen transparantie (8-bits alphakanaal), de killer-feature.

Sterke punten:

• Lossless: bit-perfect kopie van origineel, nooit artefacten.
• Transparantieondersteuning (alphakanaal).
• Scherp op elk zoomniveau (geen compressieblokkerigheid).
• Universele compatibiliteit.

Zwakke punten:

• Veel groter dan JPG voor foto’s (2-5× groter).
• Geen animatie (gebruik APNG, maar ondersteuning is gemengd).
• Minder efficiënte compressie dan moderne formaten.

Gebruik wanneer: logo’s, pictogrammen, screenshots, lijntekeningen, illustraties, overal waar je scherpe lijnen of transparantie nodig hebt.

WebP

Gemaakt door Google in 2010. Lossy modus rivaliseert met JPG met ~25-35% betere compressie bij dezelfde kwaliteit. Lossless modus rivaliseert met PNG met ~25% betere compressie. Animatiemodus rivaliseert met GIF met enorm betere kwaliteit en compressie.

In 2026 is WebP-ondersteuning 96% wereldwijd, elke moderne browser (Chrome, Firefox, Safari 14+, Edge) ondersteunt het natief. Alleen oude browsers en sommige e-mailclients missen ondersteuning.

Sterke punten:

• Beste balans van compressie-efficiëntie, compatibiliteit en featureset.
• Eén formaat dekt lossy, lossless en geanimeerde behoeften.
• Ondersteund door alle moderne afbeeldings-CDN’s (Cloudinary, Imgix, Cloudflare Images).
• Gratis en open (royalty-free).

Zwakke punten:

• Iets tragere decode dan JPG (verwaarloosbaar op moderne hardware).
• Sommige legacy software (Photoshop CS5 en ouder) vereist plugin.
• Coderen is marginaal trager dan JPG.

Gebruik wanneer: overal op het moderne web. WebP zou je default moeten zijn in 2026 tenzij een specifieke reden anders pleit.

AVIF (AV1 Image File Format)

Uitgebracht in 2019, gebaseerd op de AV1-videocodec. Het meest compressie-efficiënte breed-ondersteunde formaat in 2026, typisch 25-35% kleiner dan WebP bij dezelfde kwaliteit.

Ondersteuning in 2026: ~92% wereldwijd. Alle grote browsers ondersteunen het (Chrome 85+, Firefox 93+, Safari 16.4+, Edge). Sommige specifieke omgevingen (e-mailclients, zeer oude enterprise software) niet.

Sterke punten:

• Beste compressie van elk breed-ondersteund formaat.
• Ondersteunt HDR (high dynamic range, 10/12-bits kleurdiepte).
• Ondersteunt transparantie, animatie.
• Open en royalty-free.
• Uitstekende kwaliteit zelfs bij zeer lage bitrates.

Zwakke punten:

• Coderen is traag (10-30× trager dan JPG). Niet geweldig voor request-time codering.
• Tragere decode dan WebP (nog steeds milliseconden, maar meetbaar).
• Iets minder compatibel dan WebP.
• Nog niet alomtegenwoordig in beeldbewerkingssoftware.

Gebruik wanneer: performance-kritische sites waar elke KB telt. Pre-codeer op build time, lever met WebP- en JPG-fallbacks.

De best practice 2026: <picture> met fallbacks

Kies geen één formaat, lever de beste die elke browser ondersteunt:

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

Moderne browsers kiezen AVIF, iets oudere browsers vallen terug op WebP, zeer oude browsers krijgen JPG. Allemaal terwijl ze dezelfde <img>-semantiek en alt-tekst delen.

Frameworks automatiseren dit:

• Next.js: <Image>-component regelt AVIF/WebP/JPG automatisch.
• Astro: <Image> van astro:assets doet hetzelfde.
• Cloudinary / Imgix: leveren op basis van Accept: image/avif request-header.

Wat met HEIC?

HEIC (High Efficiency Image Container) is wat je iPhone opslaat. Dezelfde compressiefamilie als AVIF (HEVC-videocodec). Uitstekende compressie, ondersteunt transparantie en HDR.

Probleem: alleen Apple-apparaten ondersteunen HEIC natief. Windows, Android-browsers, webservers, beeldsoftware hebben allemaal plugins of conversie nodig.

Beste praktijk: converteer HEIC naar JPG of WebP voor delen of webhosting. HEIC naar JPG doet dit in je browser.

Wat met TIFF, BMP, GIF?

• TIFF: pre-press / professionele printarchivering. Enorme bestanden, geen compressie standaard. Niet gebruiken op web.
• BMP: legacy Windows-formaat. Geen compressie. Nergens gebruiken in 2026.
• GIF: 1-bit transparantie, 256 kleuren, lossless. Animatie werkt maar inefficiënt, elk modern alternatief (WebP, AVIF, zelfs MP4-video) is beter. Alleen gebruiken voor legacy-compatibiliteit.

Wat met SVG?

SVG is vector, niet een concurrerend formaat voor foto’s, maar onverslaanbaar voor logo’s, pictogrammen, illustraties, charts. Resolutie-onafhankelijk (schaalt oneindig zonder kwaliteitsverlies), kleine bestandsgrootte voor eenvoudige graphics, ondersteunt CSS-styling en JS-interactie.

Gebruik SVG voor: logo’s, pictogrammen (favicons), datavisualisaties, eenvoudige illustraties, elk graphic dat getekend is in plaats van gefotografeerd.

Favicon Generator levert SVG-varianten voor moderne browsers.

Beslissingsboom voor het kiezen van een formaat

1. Is het een logo, pictogram of eenvoudige graphic? → SVG.
2. Foto-inhoud zonder transparantie nodig? → AVIF (build time) → WebP-fallback → JPG-fallback.
3. Foto-inhoud met transparantie? → AVIF of WebP (beide ondersteunen alpha) → PNG-fallback.
4. Logo, screenshot of graphic met transparantie? → PNG (of WebP-lossless voor grootte).
5. Maximale e-mail/legacy-compatibiliteit? → JPG (geen transparantie) of PNG (met transparantie).
6. Animatie? → WebP (of AVIF als nieuwere browsers OK zijn) → GIF alleen als laatste redmiddel.

Praktijkconversiepaden

Fotograaf die levert aan klant: bewaar RAW-master, lever JPG kwaliteit 95 (web) of TIFF (print).

Webmaster die bestaande site optimaliseert: bulk-converteer alle PNG’s/JPG’s naar AVIF + WebP op build time. Lever via <picture>.

E-commerce productfoto’s: WebP kwaliteit 80 is de sweet spot. AVIF als je verkeersprofiel de coderingstijd rechtvaardigt.

Blog hero-afbeeldingen: AVIF (met WebP- en JPG-fallback), Core Web Vitals belonen je ervoor.

Social media coverafbeelding: JPG of PNG. De meeste platforms hercoderen toch, dus geen moeite met WebP/AVIF bij upload.

E-mailhandtekening: PNG (max compatibiliteit, transparantieondersteuning) of JPG (kleiner).

Samenvatting

In 2026 is de moderne web-image-stack AVIF → WebP → JPG, geleverd via <picture> met fallbacks, met PNG en SVG die hun rollen behouden voor graphics en logo’s.

Voor eenmalige conversies handelt Afbeelding converteren de volledige matrix lokaal af, je afbeelding bereikt nooit een server, ondersteunt JPG, PNG, WebP en AVIF als zowel invoer als uitvoer. Gebruik het indien nodig, maar begrijp waarvoor elk formaat optimaliseert zodat je keuzes weloverwogen zijn.