WebP vs AVIF 2026: vilket ska du använda för din webbplats
Ärlig 2026-jämförelse: WebP vs AVIF för webbprestanda, webbläsarstöd, filstorlek, kodningshastighet och den praktiska fallback-kedjan, med verkliga riktmärken.
WebP kom ut 2010. AVIF kom ut 2019. År 2026 är båda mogna, båda har ~94 %+ globalt webbläsarstöd, och båda krossar JPG/PNG på filstorlek. Men att välja mellan dem, eller hur man använder båda, snubblar fortfarande utvecklare och innehållsförvaltare. Denna guide ger dig verkliga riktmärken och en ren beslutsregel.
TL;DR, 2026-svaret
För statiska sajter och förbyggda tillgångar: AVIF först, WebP-fallback, JPG/PNG sist. <picture>-taggen hanterar kedjan automatiskt.
<picture>
<source srcset="/img/photo.avif" type="image/avif" />
<source srcset="/img/photo.webp" type="image/webp" />
<img src="/img/photo.jpg" alt="…" />
</picture>För dynamisk storleksändring, realtidsgenerering eller begränsade CPU-budgetar: endast WebP. AVIF-kodning är för tung vid begäran.
Beslutet i en mening
Om bilden genereras en gång och serveras för alltid, använd AVIF + WebP-fallback. Om den genereras per begäran, använd endast WebP.
Verkliga riktmärken: samma källa, båda formaten
10 representativa foton komprimerade vid “visuellt förlustfri” kvalitet (SSIM ≥ 0,99 vs original):
| Källa (4000×3000 JPG) | JPG k90 | WebP k80 | AVIF k60 | AVIF vs JPG |
|---|---|---|---|---|
| Strandfoto (gradient himmel) | 2,4 MB | 1,3 MB | 0,7 MB | −71 % |
| Porträtt (hudtoner) | 1,8 MB | 0,9 MB | 0,55 MB | −69 % |
| Produkt på vit BG | 1,1 MB | 0,45 MB | 0,28 MB | −75 % |
| Stadsbild (hög detalj) | 3,2 MB | 1,8 MB | 1,1 MB | −66 % |
| Matfotografi | 2,1 MB | 1,0 MB | 0,62 MB | −70 % |
| Landskap med textur | 2,7 MB | 1,6 MB | 1,0 MB | −63 % |
| Logotyp / illustration | 380 KB | 120 KB | 95 KB | −75 % |
| Skärmdump (UI) | 540 KB | 210 KB | 165 KB | −69 % |
| Mode (hög kontrast) | 1,9 MB | 0,95 MB | 0,58 MB | −69 % |
| Makro / naturdetalj | 2,5 MB | 1,4 MB | 0,85 MB | −66 % |
| Genomsnitt | 1,86 MB | 0,97 MB | 0,61 MB | −70 % |
För en typisk bild sparar AVIF ~70 % över JPG, ~37 % över WebP. Besparingarna är massiva i skala: 100 foton = 130 MB JPG, 60 MB WebP, 36 MB AVIF.
Verklighetscheck för webbläsarstöd
| Webbläsare | WebP | AVIF | Marknadsandel (2026) |
|---|---|---|---|
| Chrome (skrivbord + Android) | 2014+ | Aug 2020+ | 65 % |
| Edge | 2018+ | 2021+ | 5 % |
| Firefox | 2019+ | Okt 2021+ | 3 % |
| Safari (iOS + macOS) | 2020 (14+) | Mar 2022 (16+) | 19 % |
| Samsung Internet | 2019+ | 2021+ | 3 % |
| Opera | 2014+ | 2020+ | 2 % |
| Gammal IE / IE Mode | Aldrig | Aldrig | <1 % |
| Kombinerat stöd | ~99 % | ~94 % | n/a |
6 % AVIF-gap
De 6 % utan AVIF är mestadels: (a) Android < 7 fortfarande i bruk i vissa regioner, (b) gamla företags-Edge/IE-kvarvaror, (c) inbäddade WebViews i äldre appar. Skicka alltid en WebP-fallback, den täcker dem alla.
Kodningshastighet: WebP-fördelen
AVIF-komprimering är tyngre eftersom codecen är mer komplex (HEVC-härledd). På en typisk arbetsbelastning:
| Operation | WebP (libwebp) | AVIF (libaom) | Skillnad |
|---|---|---|---|
| 4 MP foto → k80 | 0,8s | 4,2s | 5× långsammare |
| 4 MP foto → k60 | 0,6s | 3,5s | 5,8× långsammare |
| 12 MP foto → k80 | 2,1s | 12s | 5,7× långsammare |
| 100 miniatyrer (300×300) | 8s | 38s | 4,7× långsammare |
| Bygg hela bildbiblioteket (1000 bilder) | 14 min | 1h 12min | 5,1× långsammare |
För statiska sajt-byggen är detta okej, koda en gång, leverera för alltid. För dynamisk storleksändring (t.ex. användare laddar upp avatarer vid begäran) är 5× kostnaden oöverkomlig.
När du ska välja WebP
Välj endast WebP när
- Du genererar bilder vid begäran (dynamisk storleksändring)
- Bygg-CPU/tid är begränsad
- Du vill ha enklare verktyg (bredare biblioteksstöd)
- Ditt CDN stöder inte AVIF än
- Din publik lutar mot mycket-gamla-Android (regioner med gamla enheter)
Välj AVIF + WebP-fallback när
- Statisk sajt med förbyggda tillgångar
- Fototung sajt (e-handel, portfölj, nyheter)
- Bandbreddskostnader spelar roll (CDN-räkningar, mobilanvändare)
- Core Web Vitals är kritiska (bildvikt är din flaskhals)
- Du har bygg-CPU att avvara
Fallback-kedjan i praktiken
HTML <picture>-elementet är standardsättet att leverera flera format. Webbläsaren väljer det första formatet den förstår.
<picture>
<source type="image/avif" srcset="/img/hero.avif" />
<source type="image/webp" srcset="/img/hero.webp" />
<img src="/img/hero.jpg" alt="Hjältebild" loading="lazy" />
</picture>Moderna ramverk genererar detta automatiskt:
| Ramverk | Hur |
|---|---|
| Astro | <Image src=... formats={['avif', 'webp']} /> |
| Next.js | next/image + images.formats-konfiguration |
| Gatsby | gatsby-plugin-image med formats |
| Vite | vite-imagetools-plugin |
| Nuxt | @nuxt/image med format-array |
| Hugo | Sidresurser + Resize + Convert |
Skicka inte AVIF utan WebP
De 6 % av användare utan AVIF-stöd ser inte en "trasig bild", de ser ingenting. <picture>-taggen faller igenom till <img> om alla <source>-poster misslyckas. Inkludera alltid WebP (eller JPG) som säkerhetsnät.
Kvalitetsreglagemappning
Numret du sätter i k= för AVIF mappar inte till JPG/WebP. Grova ekvivalenter:
| Visuell kvalitet | JPG k | WebP k | AVIF k |
|---|---|---|---|
| Nästan förlustfri | 95 | 95 | 80 |
| Visuellt förlustfri | 90 | 85 | 65 |
| Skarp vid normal visning | 85 | 80 | 60 |
| Acceptabel | 75 | 70 | 50 |
| Synlig komprimering | 60 | 55 | 35 |
| Tunga artefakter | 40 | 35 | 20 |
Standard för webb: JPG 85, WebP 80, AVIF 60, alla producerar visuellt identisk utdata.
Kodningstips för bästa resultat
- Koda alltid från originalet (inte från en JPG → omkodad WebP), annars sammansätter du förluster.
- För foton, använd k60 AVIF / k80 WebP, sweet spot.
- För grafik med skarpa kanter, byt till förlustfri WebP eller PNG-fallback. AVIF förlustfylld kan göra fina linjer suddiga.
- Bry dig inte om AVIF för miniatyrer under 100×100, filstorleksskillnaden är liten jämfört med kodningskostnaden.
- Ta bort metadata (EXIF, ICC) när möjligt, sparar ytterligare 10–30 KB per bild.
Vad gäller JPEG XL?
JPEG XL (JXL) är ett nyare format som vissa kallade “AVIF-mördaren” 2022. Per 2026:
- Chrome tog bort stöd 2023 (kontroversiellt beslut).
- Safari stöder det (sedan iOS 17).
- Firefox: bakom en flagga.
Inte värt att distribuera i produktion än. Webbläsarstödhistorien är för osäker. Återkom 2027.
Sammanfattning
För 90 % av webbplatser 2026:
- Byggpipeline kodar varje bild till AVIF + WebP + JPG/PNG.
<picture>-taggen i HTML levererar rätt en baserat på webbläsaren.- JPG-kvalitet 85, WebP 80, AVIF 60 som standard, visuellt identiska.
- Hoppa bara över AVIF för små bilder eller dynamiska genereringsvägar.
- Mät med Core Web Vitals före och efter, bildvikt bör sjunka ~70 %.
Du kan konvertera dina befintliga tillgångar just nu med JPG till WebP, PNG till WebP eller batchbearbeta via Konvertera bild. Allt körs lokalt, ingen uppladdning, ingen server.