WebP och AVIF är de två bildformat som omformar den moderna webben. Båda komprimerar dramatiskt bättre än JPEG och PNG, båda stöder transparens och animering, och båda har nu brett stöd. Så om du moderniserar dina bilder, vilket bör du egentligen använda?
Det ärliga svaret är ofta "båda" – men att förstå hur de skiljer sig åt gör att du kan fatta rätt beslut för varje situation. Den här guiden jämför WebP och AVIF på det som spelar roll i praktiken: komprimering, kvalitet, webbläsarstöd, kodningshastighet och funktioner.
Det korta svaret
Om du vill ha minsta möjliga filer och riktar dig till en modern publik vinner AVIF oftast. Om du vill ha bredast räckvidd och det enklaste, snabbaste arbetsflödet är WebP det säkrare standardvalet. Den bästa metoden för de flesta webbplatser är att inte välja alls: leverera AVIF med WebP som reservalternativ och en JPEG eller PNG som reserv under det, och låt varje webbläsare ladda ner den bästa version den stöder.
Resten av den här guiden förklarar varför.
Var formaten kommer ifrån
WebP skapades av Google och släpptes 2010, baserat på videokodeken VP8. Det har haft mer än ett decennium på sig att mogna, vilket märks i dess breda stöd och stabila verktyg.
AVIF kom 2019 och bygger på AV1, den royaltyfria videokodeken från Alliance for Open Media – en grupp som omfattar Google, Apple, Microsoft, Mozilla och Netflix. AV1 är en nyare och mer sofistikerad kodek än VP8, vilket är grunden till AVIF:s effektivitetsfördel.
Komprimering och kvalitet
Vid samma visuella kvalitet är AVIF-filer vanligtvis 20 till 30 procent mindre än WebP, och ungefär hälften så stora som en jämförbar JPEG. WebP är i sin tur vanligtvis 25 till 34 procent mindre än JPEG. Storleksrankningen, från bäst till sämst, är alltså i allmänhet AVIF, sedan WebP och sedan JPEG.
AVIF:s fördel är störst vid låga till medelhöga kvalitetsinställningar, där dess moderna kodek bevarar detaljer och undviker de blockartefakter som äldre format visar när de pressas hårt. Den hanterar också toningar och plana färgfält jämnt, vilket minskar den bandning man ibland ser i himmel eller skuggor. WebP är fortfarande utmärkt och mer än tillräckligt bra för den absoluta majoriteten av bilder, men AVIF är effektivitetsledaren.
Webbläsarstöd
Det är här WebP fortfarande har ett övertag. WebP stöds i alla nuvarande större webbläsare och har gjort det i flera år, inklusive Safari sedan version 14. Du kan leverera det till nästan vilken publik som helst utan en tanke.
Stödet för AVIF är nu också brett – Chrome, Firefox och Edge har stött det ett tag, och Safari lade till det i version 16.4. För de flesta målgrupper räcker den täckningen gott och väl, men eftersom en liten andel äldre enheter fortfarande inte kan visa AVIF är ett reservalternativ klokt. HTML-elementet picture gör detta enkelt, så AVIF:s något smalare stöd är sällan ett verkligt hinder.
Kodningshastighet och verktyg
WebP kodas snabbt och har mogna, väldokumenterade verktyg överallt. AVIF, byggt på den mer komplexa AV1-kodeken, är långsammare och mer CPU-krävande att koda, ibland avsevärt så vid högsta komprimeringsansträngning. För en handfull bilder är detta osynligt; för att bearbeta tusentals bilder i en byggpipeline kan skillnaden i tid och kostnad spela roll.
Kort sagt: WebP är det mer resurssnåla valet operativt, medan AVIF kräver mer beräkningskraft i utbyte mot mindre filer.
Funktioner
Båda formaten stöder *lossy* och *lossless* komprimering, full alpha-transparens och animering. AVIF går längre på några områden som spelar roll för avancerade bilder: det stöder högt dynamiskt omfång (HDR), breda färgrymder och högre bitdjup upp till 12-bit, där WebP är begränsat till standardfärg i 8-bit. Om du publicerar HDR-fotografi eller konst i bred färgrymd är AVIF det enda av de två som kan återge den troget.
WebP vs AVIF i korthet
| Egenskap | WebP | AVIF |
|---|---|---|
| Baserat på | VP8 (Google, 2010) | AV1 (AOMedia, 2019) |
| Typisk storlek mot JPEG | 25–34 % mindre | Cirka 50 % mindre |
| Kvalitet vid låga bithastigheter | Bra | Utmärkt |
| Webbläsarstöd | Universellt (Safari 14+) | Brett (Safari 16.4+) |
| Kodningshastighet | Snabb | Långsammare, mer CPU |
| Transparens och animering | Ja | Ja |
| HDR, bred färgrymd, 12-bit | Nej | Ja |
Vilket bör du välja?
För de flesta webbplatser bör du använda båda med en reservkedja: AVIF först, WebP i andra hand, JPEG eller PNG sist. Varje besökare får det effektivaste format som webbläsaren stöder, och inget går sönder på äldre enheter.
Om du måste välja ett enda format ska din prioritering avgöra. Välj **WebP** när bred kompatibilitet, snabb kodning och ett enkelt arbetsflöde betyder mest – det är det säkra, praktiska standardvalet. Välj **AVIF** när filstorlek är högsta prioritet, till exempel för stora hjältebilder, fotogallerier eller HDR-innehåll, och du kan tåla den långsammare kodningen. För hjälp att välja bland alla format, se Hur du väljer rätt bildformat för webben.
Hur du skapar WebP- och AVIF-filer
Du kan konvertera befintliga bilder utan någon programvara. För WebP, konvertera JPG till WebP eller PNG till WebP. För AVIF, konvertera JPG till AVIF eller PNG till AVIF. Om du någonsin behöver ett universellt kompatibelt format igen kan du också konvertera WebP till PNG eller WebP till JPG. För bakgrund, läs Vad är WebP och Vad är AVIF.