WebP vs AVIF: vilket bildformat ska du faktiskt använda?
Bilder är vanligtvis det tyngsta på din sida, så formatet är viktigt. AVIF klämmer mindre, WebP är överallt - men beslutet de flesta webbplatser borde göra är helt annorlunda.
Låt oservera AVIF till webbläsare som accepterar det och WebP till allt annat, bestämde per begäran, och sluta tänka på det. Förhandlingar om innehåll har gjort detta till ett löst problem, och ingen webbplats bör manuellt välja ett format för alla sina besökare år 2026.
Den mer användbara diskussionen är varför AVIF vinner där det vinner, varför WebP fortfarande gör det mesta av arbetet i praktiken och varför formatargumentet är en distraktion från en mycket större besparing som de flesta webbplatser lämnar på bord. Vi kommer till den sista delen, för det är den som verkligen betyder något.
Hur de jämför
| WebP | AVIF | |
|---|---|---|
| Släppt | 2010 | 2019 |
| Baserat på | VP8-videokodning | AV1 videokodning |
| Typisk storlek jämfört med JPEG | ~70% | ~50% |
| Kvalitet med aggressiv kompression | Bra | Märkbart bättre |
| Webbläsarstöd | Universell | Mycket bred, inte helt universell |
| Kodningshastighet | Snabb | Betydligt långsammare |
| Öppenhet | Ja, ja | Ja, ja |
| Animering | Ja, ja | Ja, ja |
| HDR / brett färgomfång | Nej | Ja, ja |
| Max mått | 16 383 px | Obegränsat effektivt |
Grov relativ storlek med liknande upplevd kvalitet. Enskilda bilder varierar mycket; rankningen gör det inte.
Där AVIF verkligen går framåt
AVIF kommer från videocodecen AV1, och den ärver de verktyg som följer med ett decennium av extra forskning. Det visar det mesta av fotografiskt innehåll med gradienter – himmel, hudtoner, mörka scener, allt med mjuka övergångar. När JPEG och WebP börjar banda och blockera vid låga bithastigheter bryts AVIF ned på ett elegant sätt. Om du har en portfölj med fotografier eller säljer något visuellt är den skillnaden värd att ha.
Där WebP fortfarande är det bästa verktyget
Två situationer. Först små bilder - ikoner, miniatyrbilder, användargränssnitt. AVIF bär mer container overhead, och på en 3 KB miniatyr som overhead kan göra AVIF-versionen större än WebP en. Alltid jämföra snarare än att anta.
För det andra, allt du behöver för att koda snabbt eller ofta. AVIF-kodning är dyrt – vanligtvis fem till tio gånger långsammare än WebP med jämförbara kvalitetsinställningar. För en byggtid tillgång pipeline som är irrelevant. För användaruppladdade bilder som bearbetas på begäran är det en verklig kostnad, vilket är anledningen till att konverteringssystem i farten vanligtvis cachar aggressivt.
Du kommer att se JPEG XL som nämns i dessa diskussioner. Det är tekniskt utmärkt, särskilt för förlustfri rekomprimering av befintliga JPEG-bilder, men webbläsarstöd har haft en komplicerad historia och det är inte en realistisk standard idag. Värt att titta på, inte värt att planera runt.
Besparingen som gör valet av format mindre
Här är den del som gör att WebP-versus-AVIF-debatten ser liten ut.
Gå och titta på bilderna på din webbplats – de faktiska filerna, inte vad sidan visar. På ett mycket stort antal webbplatser är ett foto som visas i ett 400-pixel brett kort ett 3000-pixel brett original, direkt från någons telefon eller ett lagerbibliotek. Bilden är ungefär 56 gånger så stor som pixeldatan som visas.
Konvertera att 3000px JPEG till AVIF kan ta det från 1,8 MB till 900 KB. Att ändra storleken på den till 800px som den faktiskt behöver på en hög DPI-skärm tar den till cirka 60 kB. Storleken är värd mer än formatet med en storleksordning, och ingen mängd smart kodning räddar dig från att skicka pixlar som ingen någonsin kommer att se.
- Ändra först storlek och välj sedan ett format. I den ordningen. Det andra beslutet gäller bara när det första fattas.
- Servera på ungefär 2 CSS-skärmstorleken för skärmar med hög DPI, och inte mer. Utöver 2 är skillnaden inte synlig.
- Använd responsivt srcset så att telefonen inte laddar ner den stationära versionen alls.
- Ange bredd- och höjdattribut. Gratis, och det förhindrar layoutskift medan bilden laddas.
- Ladda aldrig din LCP-bild. Det är den enda bilden som måste komma omedelbart.
Gör det utan ett byggsteg
Varje webbläsare skickar en Accept en lista över de bildformat som den kan hantera. En kant som läser att header kan konvertera och ändra storlek i farten: du laddar upp ett högkvalitativt original, och varje besökare får det minsta formatet som deras webbläsare stöder, vid de dimensioner som deras layout behöver, cachad efter den första begäran så att konverteringskostnaden betalas en gång.
Det är värt att göra, inte för att det är smart, utan för att det är det enda tillvägagångssättet som överlever kontakten med verkligheten. Manuella exportrörledningar fungerar tills någon laddar upp ett 4000px produktfoto via CMS på en fredag eftermiddag, och sedan slutar de tyst och ingen märker i sex månader.
Snabba svar
Är AVIF bättre än WebP?
För fotografiska bilder, ja - AVIF-filer är vanligtvis cirka 30% mindre än WebP på samma upplevda kvalitet, och håller upp mycket bättre under aggressiv komprimering på lutningar och mörka scener. WebP är fortfarande bättre för mycket små bilder, där AVIF:s överliggande behållare kan göra filer större och kodar fem till tio gånger snabbare. Att betjäna båda via innehållsförhandlingar undviker valet helt.
Ska jag byta ut alla mina JPEG-bilder mot AVIF?
Konvertera istället för att ersätta. Behåll dina högkvalitativa original och generera AVIF- och WebP-versioner från dem, så att varje webbläsare får det bästa formatet den accepterar. Om du tar bort originalet kan du inte koda om när formaten ändras igen, och ett litet antal klienter behöver fortfarande en JPEG-återgång.
Är det viktigare att ändra storlek på en bild än formatet?
Oftast med stor marginal. Ett foto på 3000 pixlar som visas i en behållare med 400 pixlar innehåller ungefär 56 gånger så mycket pixeldata som faktiskt visas. Att ändra storlek på det till den visade storleken sparar vanligtvis mycket mer än att konvertera det överdimensionerade originalet till ett modernt format. Ändra först storlek och välj sedan formatet.
Vilka webbläsare stöder AVIF?
Chrome, Firefox, Edge, Safari och de stora mobila webbläsarna stöder alla AVIF i nuvarande versioner, som täcker den stora majoriteten av verklig trafik. Stödet är inte helt universellt över äldre installerade versioner, varför AVIF bör betjänas genom innehållsförhandling med WebP som reserv snarare än som det enda formatet som erbjuds.
Så den ärliga sammanfattningen: formatfrågan har ett automatiskt svar, och frågan värd din uppmärksamhet är om du skickar bilder tio gånger större än det utrymme de visas i. Kolla in en produktbild. Du kanske inte gillar vad du hittar.
Se hur NordicCDN gör detta för din webbplats:
Mads har arbetat inom IT – mestadels som värd – sedan han var 16. Han tog tidigt del i ett SaaS-företag och hjälpte till att växa fram till förvärvet av Visma, har byggt och drivit datacenternätverk och fungerat som CTO för ett danskt datacenter. Han startade NordicCDN för att göra snabb och säker infrastruktur enkel att använda.
