Iedereen heeft net kunnen wennen aan WebP. De ondersteuning is eindelijk aanwezig in de meeste browsers. Toch is er alweer een nieuw ondersteund formaat in aankomst: AVIF.

Wat is AVIF?

AVIF is gebaseerd op het compressie algoritme van AV1. AV1 is een video formaat die nu alweer geruime tijd onder ons is. AV1 heeft nog niet zo'n uitgebreide ondersteuning (momenteel Chrome, Firefox en Edge) als bijvoorbeeld MP4, maar in veel gevallen wel kleiner. Voor partijen waarbij video streaming en de beste compressie, van essentieel belang zijn—zoals Netflix—maken ze al gebruik van AV1 waar mogelijk.

Genoeg AV1, want het ging over AVIF. AVIF staat voor AV1 Image File Format en daarmee is meteen duidelijk waar het van afgeleid is. AV1 is zo goed in het comprimeren van video dat dit ook prima toegepast kan worden voor afbeeldingen.

"... a video codec are not significantly different from image compression tooling. Given the huge compression gains of modern video codecs, they are compelling as image coding formats." 1

Resultaat van AVIF

Als voorbeeld heb ik een afbeelding van Unsplash gepakt (credits: Pontus Wellgraf). Omdat AVIF zwaar is om te comprimeren (kom ik later op terug) heb ik deze verkleind naar 1280 pixels breed. De uitkomst door squoosh.app.

• Originele JPEG: 184 kB
• MozJPEG: 94,3 kB
• WebP: 68,8 kB
• AVIF: 41,4 kB

Disclaimer: Deze cijfers kunnen heel erg variëren, dit is één voorbeeld, maar er zijn veel parameters waar je mee kunt spelen.

Ondersteuning

Op dit moment is de ondersteuning enkel nog beschikbaar in Chrome vanaf versie 85. Firefox heeft het formaat enkele maanden geleden ingebouwd, maar dit zit nog achter een flag. Dit houdt in dat gebruikers het zelf moeten aanzetten en het niet automatisch gebruikt kan worden. Voor Edge is de status 'positief' en er zijn berichten dat AV1 en AVIF ondersteuning binnenkort naar Windows komen.

Dan hou je vooral Safari nog als belangrijke speler over. Zij hebben nog geen signaal gegeven over mogelijke ondersteuning in de toekomst. Android heeft ook nog geen ondersteuning beschikbaar voor AVIF. Gezien de steun van het Chrome team verwacht ik dat het komende maanden wel gaat komen.

Gebruik

Op volledige browser ondersteuning kunnen we de komende tijd nog niet rekenen. Maar we kunnen het al wel gebruiken. Net als we momenteel nog met WebP moeten doen (tot iOS 14) met fallbacks.

Als we onze afbeeldingen beschikbaar hebben, kun je het op de volgende manier insluiten:

<picture>
   <source srcset=\"example.avif\" type=\"image/avif\">
   <source srcset=\"fallback.webp\" type=\"image/webp\">
   <img src=\"fallback.jpg\" alt=\"AVIF example with WebP and JPEG fallback\">
</picture>

Het element is volledige backwards compatible. In bovenstaande voorbeeld zal de browser eerst de .avif proberen, als die niet ondersteund wordt gaat het over naar .webp. Tot slot valt die terug op .jpg. Op het moment is dit de native manier om bovenstaand voorbeeld in te sluiten.

Het is net als met WebP ook mogelijk het met JavaScript de support te controleren. Daarvoor zul je een heel klein AVIF plaatje moeten proberen en kijken of die getoond kan worden. Voor een idee kun je kijken hoe mensen dit met WebP doen.

Afbeelding omzetten naar AVIF

Het implementeren één ding, beschikbaarheid van een AVIF afbeelding is twee. Er zijn verschillende manieren implementatie, zowel de originele van AOMedia als versies in Rust en Go. Veruit de makkelijkste manier is om gebruik te maken van squoosh.app.

Squoosh.app maakt het mogelijk je afbeeldingen om te zetten naar verschillende formaten. Daarmee kun je ook makkelijk vergelijken of je afbeelding kleiner is in MozJPEG, WebP, AVIF, OxiPNG, etc.

Let wel op dat AVIF verschrikkelijk zwaar (en daarmee ook langzaam) is. Als het formaat zich wat meer vestigt, zullen er vast stappen gemaakt worden om de compiler te optimaliseren. Voor nu raad ik aan niet al te grote afbeeldingen te comprimeren met AVIF, of je computer even zijn gang te laten gaan.