AVIF of WebP: kleiner bestand is niet altijd sneller

AVIF is een goede kandidaat wanneer het een afbeelding bij de gewenste kwaliteit duidelijk kleiner maakt. WebP is een sterk uitgangspunt wanneer de winst in bestandsgrootte gering is of de pagina ermee sneller laadt. De kleinste download levert niet vanzelf de kortste paginalaadtijd op: de browser moet het beeld ook decoderen en weergeven.

Voor gewone foto’s loont het om beide formaten met hetzelfde bronbeeld te vergelijken. Transparante illustraties vragen extra aandacht voor scherpe randen; bij animatie telt de volledige beweging mee. Ook de kwaliteitsinstelling, de pixelafmetingen en de browsers van je publiek bepalen welke versie bruikbaar is.

Welke eigenschappen krijg je met elk formaat?

De AVIF-specificatie van de Alliance for Open Media beschrijft compressie met en zonder kwaliteitsverlies, transparantie, animatie, HDR en een breed kleurengamma. AVIF kan bij vergelijkbare kwaliteit sterker comprimeren dan WebP. Dat is een mogelijkheid, geen vaste besparing: de inhoud van de afbeelding en de gekozen encoderinstellingen bepalen het uiteindelijke bestand.

Googles WebP-documentatie noemt eveneens compressie met en zonder kwaliteitsverlies, transparantie en animatie. WebP wordt ondersteund door grote browsers als Chrome, Safari, Firefox, Edge en Opera. Voor een gewone websitefoto, een illustratie met transparante achtergrond of een korte animatie beschikken beide formaten dus over de belangrijkste functies. HDR en een breed kleurengamma geven AVIF een extra mogelijkheid wanneer het bronbeeld en de beoogde weergave daar ook gebruik van maken.

Wat zegt de browsertest over laadtijd?

In het onderzoek van Benedikt Dornauer en Michael Felderer uit 2023 verbeterde de gerapporteerde paginalaadtijd ten opzichte van gecomprimeerde JPEG met 21% voor WebP en 15% voor AVIF. De onderzoekers gebruikten een speciaal gebouwde pagina met foto’s van uiteenlopende afmetingen en maten die in Chrome, Edge, Safari, Opera en Firefox op twee computers. Ze stemden de compressie af op een vergelijkbare beeldkwaliteit, in plaats van de standaardinstelling van elke encoder te laten beslissen.

De gemeten paginalaadtijd omvatte het laden en weergeven van alle inhoud op die testpagina. Het resultaat zegt dus iets over de combinatie van afbeeldingen, browser, apparaat en testomgeving; het is geen meting van de zichtbaarheid van één losse foto. Het onderzoek wees ook geen afzonderlijke oorzaak aan voor het verschil tussen de formaten. Downloadtijd, decodering en weergave spelen allemaal een rol bij wat een bezoeker ziet, maar uit deze proef volgt geen algemene regel dat WebP op iedere website sneller is.

Een pagina met veel kleine foto’s kan bovendien een andere uitkomst geven dan een pagina waarop één groot beeld de aandacht trekt. De proef gebruikte foto’s en geeft daarmee geen rechtstreeks antwoord voor transparante illustraties of animatie. De relevante vergelijking is steeds die tussen versies van dezelfde inhoud, op dezelfde afmetingen en in de browsers waarin de website werkelijk wordt gebruikt.

Foto, transparante illustratie of animatie?

Foto’s. Begin met hetzelfde bronbeeld en maak AVIF- en WebP-versies op gelijke pixelafmetingen. Beoordeel de zichtbare kwaliteit op het formaat waarop de foto op de pagina verschijnt. Als AVIF daarbij veel minder data vraagt en het beeld tijdig zichtbaar wordt, is die besparing nuttig. Bij een klein verschil in bestandsgrootte kan WebP aantrekkelijker zijn, zeker als je anders voor een hele beeldcollectie extra varianten moet maken en beheren.

Transparante illustraties. Let op dunne lijnen, letters en de overgang tussen beeld en achtergrond. Compressiefouten die in een drukke foto nauwelijks opvallen, kunnen een egale kleur of scherpe rand ontsieren. Zowel AVIF als WebP biedt compressie zonder kwaliteitsverlies; die optie is zinvol wanneer de versie met kwaliteitsverlies zichtbare fouten geeft. Vergelijk de transparante rand tegen de werkelijke achtergrond van de website, want op een witte voorbeeldachtergrond kan een probleem verborgen blijven.

Animatie. Vergelijk dezelfde beeldreeks, afmetingen en duur. Het eerste stilstaande beeld vertelt weinig over de grootte of kwaliteit van het volledige bestand. Controleer ook of details en transparante randen tijdens de beweging goed blijven. Omdat beide formaten animatie ondersteunen, is hun functielijst hier minder beslissend dan de uitvoer van de encoder en de weergave in de browsers van je publiek.

Waarom kwaliteit en afmetingen de vergelijking veranderen

De uitleg over beeldprestaties op web.dev beschrijft waarom foto’s vaak goed met kwaliteitsverlies te comprimeren zijn, terwijl tekst en scherpe lijnen sneller zichtbare fouten krijgen. De pagina raadt aan verschillende compressieniveaus te proberen en beeldvarianten af te stemmen op de afmetingen waarop ze worden getoond. Eén numerieke kwaliteitsstand is daarom geen eerlijke maat voor twee verschillende encoders: vergelijk het zichtbare resultaat en de bestandsgrootte, niet alleen het getal in de exportinstellingen.

Ook een efficiënt gecodeerd beeld draagt onnodige data over wanneer het veel groter is dan zijn plaats op de pagina vereist. Maak voor een grote foto passende varianten voor verschillende schermen en vergelijk AVIF en WebP pas nadat de afmetingen kloppen. Kijk daarna naar de tijd tot het relevante beeld zichtbaar is, naast de totale paginalaadtijd. Vooral bij een prominent beeld bovenaan kan dat verschil voor bezoekers merkbaar zijn, terwijl een kleine afbeelding verderop minder zwaar weegt in de keuze.

Welke versie krijgt voorrang in de browser?

Met het picture-element kun je meerdere formaten voor dezelfde afbeelding aanbieden. Volgens MDN’s uitleg van picture beoordeelt de browser de aangeboden source-elementen op onder meer bestandstype en schermvoorwaarden; het img-element levert de terugvaloptie. Zo kun je AVIF en WebP aanbieden met een JPEG- of PNG-versie voor het geval de eerdere opties niet bruikbaar zijn.

De volgorde van de bronnen bepaalt welke geschikte versie voorrang krijgt. De browser voert daarbij geen wedstrijd tussen de bestanden uit om te ontdekken welk formaat op die pagina het snelst zou zijn. Zet AVIF voorop als juist die versie voor het betreffende beeld de beste keuze is; geef WebP voorrang wanneer de vergelijking in zijn voordeel uitvalt. De alternatieve tekst en afmetingen horen bij het img-element en blijven zo ook voor de aangeboden formaatvarianten beschikbaar.

Een beslisboom voor de formaatkeuze

Heeft het beeld HDR of een breed kleurengamma nodig? Beoordeel AVIF en controleer of de bedoelde weergave die eigenschappen goed toont.
Is het een gewone foto? Vergelijk AVIF en WebP bij dezelfde afmetingen en aanvaardbare zichtbare kwaliteit; kies vervolgens op bestandsgrootte én weergavetijd.
Bevat de illustratie transparantie, tekst of dunne lijnen? Controleer de randen op de echte pagina en probeer compressie zonder kwaliteitsverlies als die zichtbaar achteruitgaan.
Is het een animatie? Beoordeel het complete bestand en de beweging in de browsers van je publiek.

Voor een gemengde beeldcollectie is WebP een bruikbaar uitgangspunt met brede browserondersteuning. Voeg AVIF gericht toe waar de besparing, beeldkwaliteit of ondersteuning voor HDR en breed kleurengamma een concreet voordeel oplevert. Laat de voorkeursbron per beeld afhangen van die uitkomst, met een passende terugvaloptie voor browsers die haar niet kunnen gebruiken.