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 bör göra är en helt annan.
Låt oss få svaret ur vägen: servera AVIF till webbläsare som accepterar det och WebP till allt annat, bestämde per begäran, och sluta tänka på det. Innehållsförhandling 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 video codec | AV1 video codec |
| Typisk storlek vs JPEG | ~70% | ~50% |
| Kvalitet vid aggressiv kompression | Bra. | Märkbart bättre |
| Webbläsarstöd | Universal | Mycket bred, inte helt universell |
| Kodningshastighet | Snabb | Betydligt långsammare |
| Öppenhet | Ja. | Ja. |
| Animering | Ja. | Ja. |
| HDR / brett färgomfång | Nej | 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 drar framåt
AVIF är härledd från AV1 video codec, och det ärver de verktyg som kommer med ett decennium av extra forskning. Det visar mest på 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, försämras AVIF graciöst. Om du kör en fotograferingsportfölj eller säljer något visuellt är den skillnaden värt att ha.
Där WebP fortfarande är det bästa verktyget
Två situationer. Först, små bilder ikoner, miniatyrer, UI sprites. AVIF bär mer container overhead, och på en 3 KB miniatyr som overhead kan göra AVIF version 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 vid 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 riktig kostnad, varför konverteringssystem i farten vanligtvis cachar aggressivt.
Du kommer att se JPEG XL 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.
Sparandet som dvärgar formatvalet
Här är den del som gör att WebP-mot-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 56 gånger så stor som pixeldata.
Konvertera att 3000px JPEG till AVIF kan ta det från 1. 8 MB till 900 KB. Storleksändring till 800px det faktiskt behöver på en hög DPI-skärm tar det till ca 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 är bara viktigt när det första är gjort.
- Servera på ungefär 2 CSS-skärmstorleken för höga DPI-skärmar, och inte mer. Bortom 2 skillnaden är inte synlig.
- Använd responsivt srcset så en telefon laddar inte ner skrivbordsversionen alls.
- Ange bredd och höjdattribut. Gratis, och det förhindrar layoutskift medan bilden laddas.
- Ladda aldrig din LCP-bild. Det är den bild som måste komma fram omedelbart.
Gör det utan ett byggsteg
Varje webbläsare skickar en Accept header som listar de bildformat 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 webbläsaren 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, men för att det är det enda tillvägagångssätt som överlever kontakt med verkligheten. Manuella exportrörledningar fungerar tills någon laddar upp ett 4000px produktfoto genom CMS på en fredag eftermiddag, och sedan slutar de tyst att fungera 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 förblir bättre för mycket små bilder, där AVIF:s behållaröverhead kan göra filer större, och det kodar fem till tio gånger snabbare. Att tjäna både via innehållsförhandling undviker valet helt.
Ska jag ersätta alla mina JPEG-filer med AVIF?
Konvertera istället för att ersätta. Behåll dina högkvalitativa original och generera AVIF- och WebP-versioner från dem, som betjänar varje webbläsare det bästa formatet det accepterar. Om du tar bort originalen 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. En 3000-pixel bild som visas i en 400-pixel behållare bär ungefär 56 gånger pixel data faktiskt visas. Att ändra storlek på den visade storleken sparar vanligtvis mycket mer än att konvertera det överdimensionerade originalet till ett modernt format. Ändra storlek först 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ärt din uppmärksamhet är om du skickar bilder tio gånger större än det utrymme de visas i. Kolla in ett produktfoto. Du kanske inte gillar vad du hittar.
Se hur NordicCDN gör detta för din webbplats:
Mads har arbetat inom IT - mestadels värd - sedan han var 16. Han tog tidigt del i ett SaaS-företag och hjälpte till att växa fram till Vismas förvärv, 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.
