Snelle vergelijking
| Eigenschap | AVIF | PNG |
|---|---|---|
| Compressie | Met en zonder verlies | Alleen verliesloos |
| Fotobestandsgrootte (1080p) | 50–150 KB | 2–8 MB |
| Transparantie | Volledig alfakanaal | Volledig alfakanaal |
| Kleurdiepte | 8, 10, 12 bit | 8, 16 bit |
| HDR-ondersteuning | Ja (PQ, HLG) | Nee |
| Animatie | Ja (AVIF-sequentie) | Nee (APNG is apart) |
| Browserondersteuning | ~95 % (Chrome, Firefox, Edge, Safari 16.4+) | 100 % (universeel) |
| Software-ondersteuning | Beperkt (groeiend) | Universeel |
| Coderingssnelheid | Langzaam (CPU-intensief) | Snel |
| Decoderingssnelheid | Matig | Zeer snel |
| Verliesloze kwaliteit | Pixelperfect | Pixelperfect |
| Standaard | AV1 (2018, AOM) | ISO/IEC 15948 (1996, W3C) |
| Ideaal voor | Webfoto’s, miniaturen | Afbeeldingen, screenshots, bewerking |
Compressie: Waarom AVIF-bestanden zoveel kleiner zijn
AVIF gebruikt de AV1-videocodec voor stilstaande beelden. AV1 is ontworpen door de Alliance for Open Media (Google, Apple, Microsoft, Netflix en anderen) en vertegenwoordigt decennia aan videocompressieonderzoek toegepast op afbeeldingen.
PNG gebruikt DEFLATE-compressie (hetzelfde als ZIP-bestanden) toegepast op elke rij pixels. Het is verliesloos — elke pixel wordt exact behouden. Dit garandeert perfecte kwaliteit, maar bestanden zijn inherent groot voor foto’s.
Het verschil is dramatisch voor fotografische inhoud:
- Een 1920×1080-foto: PNG ~4 MB vs AVIF ~100 KB (40x kleiner)
- Een 4K-foto: PNG ~15 MB vs AVIF ~300 KB (50x kleiner)
- Een eenvoudig logo met vlakke kleuren: PNG ~15 KB vs AVIF ~8 KB (2x kleiner)
De besparing is het grootst bij foto’s omdat de compressie met verlies van AVIF uitblinkt in het verwijderen van visuele redundantie die mensen niet kunnen waarnemen. Bij eenvoudige afbeeldingen met vlakke kleuren is de verliesloze aanpak van PNG al efficiënt, waardoor het verschil kleiner wordt.
Visuele kwaliteit: Met verlies vs verliesloos
PNG is altijd verliesloos. Elke pixel in de uitvoer is identiek aan de invoer. Dit maakt PNG de gouden standaard voor:
- Screenshots (tekst moet pixelscherp zijn)
- Diagrammen en technische tekeningen
- Logo’s en pictogrammen
- Bronbestanden voor verdere bewerking
- QR-codes (elke pixel telt)
AVIF ondersteunt zowel modi met als zonder verlies. In modus met verlies (standaard) verwijdert AVIF informatie die het menselijk oog niet gemakkelijk kan waarnemen. Bij hoge kwaliteitsinstellingen (CRF 18–23) is het verschil met het origineel vrijwel onzichtbaar. Bij agressieve instellingen (CRF 40+) worden blokartefacten en kleurverschuivingen zichtbaar.
In verliesloze modus produceert AVIF pixelperfecte uitvoer net als PNG, maar met ongeveer 20–30 % kleinere bestandsgroottes. De verliesloze AVIF-codering is echter erg langzaam vergeleken met PNG.
Transparantie
Beide formaten ondersteunen volledige 8-bit alfakanaaltransparantie — elke pixel kan 256 niveaus van dekking hebben, van volledig transparant tot volledig dekkend. Dit maakt vloeiende anti-aliased randen, gradiënten en semi-transparante overlays mogelijk.
Belangrijk verschil: transparante AVIF-bestanden zijn aanzienlijk kleiner dan transparante PNG’s. Een productfoto op een transparante achtergrond kan 3 MB zijn als PNG maar slechts 80 KB als AVIF. Dit maakt AVIF bijzonder aantrekkelijk voor e-commerce productafbeeldingen.
Browserondersteuning
PNG wordt ondersteund door elke browser die ooit is gemaakt — 100 % compatibiliteit, nul risico.
AVIF-ondersteuning per 2026:
- Chrome 85+ (augustus 2020) — volledige ondersteuning
- Firefox 93+ (oktober 2021) — volledige ondersteuning
- Edge 85+ (gelijk aan Chrome)
- Opera 71+ (gelijk aan Chrome)
- Safari 16.4+ (maart 2023) — volledige ondersteuning
- Samsung Internet 16+ — volledige ondersteuning
- Internet Explorer — geen ondersteuning (beëindigd)
Wereldwijde ondersteuning is ongeveer 95 %. Voor de overige 5 % gebruikt u het <picture>-element met een PNG- of JPEG-fallback:
<picture>
<source srcset="image.avif" type="image/avif">
<img src="image.png" alt="Beschrijving">
</picture>
Software-ondersteuning
Hier heeft PNG een enorm voordeel. PNG wordt ondersteund door elke afbeeldingseditor, CMS, e-mailclient, kantoorpakket en besturingssysteem dat bestaat. AVIF-ondersteuning groeit maar is nog beperkt:
| Software | AVIF-ondersteuning | PNG-ondersteuning |
|---|---|---|
| Adobe Photoshop | v25.0+ (2024) | Alle versies |
| GIMP | v2.10.32+ (plugin) | Alle versies |
| Figma | Alleen import (2024) | Volledige ondersteuning |
| Canva | Nee | Volledige ondersteuning |
| WordPress | v6.5+ (2024) | Alle versies |
| Shopify | Automatische conversie | Volledige ondersteuning |
| Windows Foto’s | Windows 11 (extensie) | Alle versies |
| macOS Voorvertoning | macOS 14+ | Alle versies |
| Microsoft Office | Nee | Volledige ondersteuning |
| E-mailclients | Bijna geen | Universeel |
Dit is de belangrijkste reden waarom mensen AVIF naar PNG converteren — de afbeelding moet worden gebruikt in software of een workflow die AVIF nog niet ondersteunt.
Wanneer AVIF gebruiken
- Websitefoto’s: productafbeeldingen, hero-banners, blogpostafbeeldingen. AVIF biedt de beste kwaliteit-grootteverhouding van alle formaten.
- Miniaturen en galerijen: tientallen of honderden afbeeldingen op één pagina profiteren enorm van een 50–90 % verkleining.
- Social media-inhoud: kleinere uploads, sneller delen. Platforms die AVIF accepteren tonen het op volledige kwaliteit.
- Mobile-first websites: kleinere bestanden betekenen sneller laden via mobiele verbindingen en minder dataverbruik voor bezoekers.
- CDN-distributie: AVIF serveren aan ondersteunde browsers vermindert de bandbreedtekosten aanzienlijk. Gebruik content-negotiation (
Accept-header) om AVIF of PNG/JPEG te serveren waar van toepassing.
Wanneer PNG gebruiken
- Screenshots: tekst, UI-elementen en scherpe randen moeten pixelperfect zijn. AVIF met verlies kan tekst subtiel vervagen.
- Logo’s en pictogrammen: vectorachtige afbeeldingen met vlakke kleuren en scherpe randen. PNG verwerkt deze efficiënt en verliesloos.
- Bron-/archiefbestanden: als u de afbeelding later moet bewerken, bewaar dan de verliesloze PNG. De compressie met verlies van AVIF verwijdert informatie permanent.
- Drukwerk: drukkerijen accepteren universeel PNG en TIFF. Zeer weinige accepteren AVIF.
- E-mail: e-mailclients hebben vrijwel geen AVIF-ondersteuning. PNG is de veilige keuze voor afbeeldingen in e-mails.
- Universeel delen: stuurt u een afbeelding naar iemand die mogelijk geen AVIF-ondersteuning heeft? Gebruik PNG.
- Sprites en game-assets: game-engines en sprite-tools verwachten PNG. Precisie op pixelniveau is essentieel.
Hoe zit het met WebP?
WebP bevindt zich qua compressie-efficiëntie en compatibiliteit tussen PNG en AVIF:
| Metriek | PNG | WebP | AVIF |
|---|---|---|---|
| Fotogrootte (1080p) | ~4 MB | ~200 KB | ~100 KB |
| Browserondersteuning | 100 % | ~97 % | ~95 % |
| Software-ondersteuning | Universeel | Goed | Beperkt |
| Coderingssnelheid | Snel | Snel | Langzaam |
| Max. resolutie | Onbeperkt | 16383×16383 | 8193×4320 (L5.1) |
Voor webdistributie is WebP een pragmatische middenweg: 50 % kleiner dan PNG, vrijwel universele browserondersteuning en goede softwarecompatibiliteit. AVIF biedt betere compressie maar met tragere codering en minder compatibiliteit. Veel websites serveren AVIF met WebP als fallback en PNG als laatste redmiddel.