Vad är AVIF?

AVIF räknas som nästa generations bildformat som utlovar halverade filstorlekar, knivskarpa bilder och snabbare sajter. Men vad är det egentligen? Och är det dags att byta ut alla bilder redan i dag?

När vi tidigare skrev om WebP konstaterade vi att bildformaten på webben äntligen börjat röra på sig efter decennier av trötta JPEG och PNG-filer. Men utvecklingen stannar inte upp. Som de nördar vi är på 040 har vi grävt ner oss i AVIF för att reda ut vad du behöver veta.

Vad är egentligen AVIF?

AVIF står för AV1 Image File Format. Det är ett öppet och licensfritt bildformat som utvecklas av Alliance for Open Media – en sammanslutning där bland annat Google, Apple, Microsoft, Mozilla och Netflix ingår.

Formatet bygger på videokomprimeringsstandarden AV1. Förenklat uttryckt har man tagit samma smarta teknik som gör att du kan strömma film på Netflix i hög kvalitet utan att bredbandet storknar, och applicerat den på vanliga stillbilder på webben.

Hur skiljer sig AVIF från WebP och JPEG?

Den stora vinsten med AVIF är hur effektivt det komprimerar bilder. Formatet är betydligt smartare på att skala bort onödig data som ögat ändå inte ser:

• Jämfört med traditionell JPEG ger AVIF oftast ca 50 % mindre filstorlek med samma (eller bättre) bildkvalitet.
• Jämfört med WebP sparar AVIF ytterligare 20–30 % i datamängd.

Dessutom stöder AVIF både genomskinlighet (transparens), animationer och bättre färghantering (HDR).

Vi testade på 040.se - hur stor blev skillnaden?

Teoretiska siffror i all ära, men vad händer i praktiken? Vi testade nyligen att byta ut bilderna här på vår egen sajt från WebP till AVIF. Resultaten? 29% lägre total sidvikt och en förbättring av vår laddtid (LCP) med 3-6%. Det låter inte jättedramatiskt vid en första anblick, men för en redan optimerad sajt är det en riktigt fin vinst som både Google och mobilsurfare tackar för.

Vilka webbläsare stöder AVIF?

I princip alla moderna webbläsare har fullt stöd för AVIF i dag. Google Chrome, Mozilla Firefox, Microsoft Edge och Apple Safari (från version 16.4) visar formatet utan problem.

Även i publiceringsverktyg har det börjat hända grejer: sedan version 6.5 har WordPress inbyggt stöd för att ladda upp och hantera AVIF-filer direkt i mediebiblioteket.

Varför spelar filstorleken så stor roll?

Visste du att bilder oftast står för lejonparten av en webbplats totala vikt? När bilderna blir hälften så tunga laddar sajten märkbart snabbare. Det minskar risken att otåliga mobilbesökare vänder i dörren, ger er bättre förutsättningar att synas högt på Google (som älskar snabba sajter) och sparar dessutom bandbredd och energi.

Varför använder inte alla redan AVIF?

Om AVIF är så bra, varför har det inte ersatt allt annat? Det beror på några praktiska saker:

1. Kameror och mobiler sparar fortfarande oftast i JPG eller HEIC.
2. Komprimeringen kräver mer datorkraft. Att skapa en AVIF-bild tar lite längre tid för servern än att skapa en JPEG eller WebP.
3. Alla gamla bildprogram eller externa verktyg har inte fullt stöd än.

För webbutvecklare går detta dock att lösa smidigt i kod. Med HTML-elementet <picture> kan vi servera AVIF till alla besökare vars webbläsare klarar av det, och automatiskt skicka WebP eller JPEG till äldre enheter.

Borde du byta ut alla dina bilder nu?

Det korta svaret: det beror på.

Om er sajt redan använder optimerade WebP-bilder sitter ni lugnt i båten. WebP är fortfarande ett fantastiskt och snabbt format. Men om ni bygger en ny webbplats, driver en bildtung e-handel eller vill kapa varje millisekund i laddtid (något som både besökare och Google älskar), då är AVIF helt klart rätt väg att gå framåt.