WebP vs AVIF 2026: hvilken bør du bruke for nettstedet ditt
Ærlig 2026-sammenligning: WebP vs AVIF for nettytelse, nettleserstøtte, filstørrelse, kodingshastighet og den praktiske fallback-kjeden, med ekte målinger.
WebP kom ut i 2010. AVIF kom ut i 2019. I 2026 er begge modne, begge har ~94 %+ global nettleserstøtte, og begge knuser JPG/PNG på filstørrelse. Men å velge mellom dem, eller hvordan man bruker begge, snubler fortsatt utviklere og innholdsforvaltere. Denne guiden gir deg ekte målinger og en ren beslutningsregel.
TL;DR, 2026-svaret
For statiske nettsteder og forhåndsbygde ressurser: AVIF først, WebP-fallback, JPG/PNG sist. <picture>-taggen håndterer kjeden automatisk.
<picture>
<source srcset="/img/photo.avif" type="image/avif" />
<source srcset="/img/photo.webp" type="image/webp" />
<img src="/img/photo.jpg" alt="..." />
</picture>For dynamisk størrelsesendring, sanntidsgenerering eller begrensede CPU-budsjetter: kun WebP. AVIF-koding er for tung ved forespørsel.
Beslutningen i én setning
Hvis bildet genereres én gang og serveres for alltid, bruk AVIF + WebP-fallback. Hvis det genereres per forespørsel, bruk kun WebP.
Ekte målinger: samme kilde, begge formater
10 representative fotografier komprimert ved “visuelt tapsfri” kvalitet (SSIM ≥ 0,99 vs original):
| Kilde (4000x3000 JPG) | JPG k90 | WebP k80 | AVIF k60 | AVIF vs JPG |
|---|---|---|---|---|
| Strandfoto (gradient himmel) | 2,4 MB | 1,3 MB | 0,7 MB | −71 % |
| Portrett (hudtoner) | 1,8 MB | 0,9 MB | 0,55 MB | −69 % |
| Produkt på hvit BG | 1,1 MB | 0,45 MB | 0,28 MB | −75 % |
| Bybilde (høy detalj) | 3,2 MB | 1,8 MB | 1,1 MB | −66 % |
| Matfotografi | 2,1 MB | 1,0 MB | 0,62 MB | −70 % |
| Landskap med tekstur | 2,7 MB | 1,6 MB | 1,0 MB | −63 % |
| Logo / illustrasjon | 380 KB | 120 KB | 95 KB | −75 % |
| Skjermbilde (UI) | 540 KB | 210 KB | 165 KB | −69 % |
| Mote (høy kontrast) | 1,9 MB | 0,95 MB | 0,58 MB | −69 % |
| Makro / naturdetalj | 2,5 MB | 1,4 MB | 0,85 MB | −66 % |
| Gjennomsnitt | 1,86 MB | 0,97 MB | 0,61 MB | −70 % |
For et typisk bilde sparer AVIF ~70 % over JPG, ~37 % over WebP. Besparelsene er enorme i skala: 100 fotografier = 130 MB JPG, 60 MB WebP, 36 MB AVIF.
Virkelighetssjekk for nettleserstøtte
| Nettleser | WebP | AVIF | Markedsandel (2026) |
|---|---|---|---|
| Chrome (skrivebord + 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 % |
| Gammel IE / IE Mode | Aldri | Aldri | <1 % |
| Kombinert støtte | ~99 % | ~94 % | n/a |
6 % AVIF-gap
De 6 % uten AVIF er for det meste: (a) Android < 7 fortsatt i bruk i noen regioner, (b) gamle bedrifts-Edge/IE-rester, (c) innebygde WebViews i eldre apper. Send alltid en WebP-fallback, det dekker dem alle.
Kodingshastighet: WebP-fordelen
AVIF-komprimering er tyngre fordi codecen er mer kompleks (HEVC-avledet). På en typisk arbeidsmengde:
| Operasjon | WebP (libwebp) | AVIF (libaom) | Forskjell |
|---|---|---|---|
| 4 MP foto til k80 | 0,8s | 4,2s | 5x langsommere |
| 4 MP foto til k60 | 0,6s | 3,5s | 5,8x langsommere |
| 12 MP foto til k80 | 2,1s | 12s | 5,7x langsommere |
| 100 miniatyrbilder (300x300) | 8s | 38s | 4,7x langsommere |
| Bygg hele bildebiblioteket (1000 bilder) | 14 min | 1t 12min | 5,1x langsommere |
For statiske nettstedsbygg er dette greit, kod én gang, lever for alltid. For dynamisk størrelsesendring (f.eks. brukere laster opp avatarer ved forespørsel) er 5x kostnaden uoverkommelig.
Når du skal velge WebP
Velg kun WebP når
- Du genererer bilder ved forespørsel (dynamisk størrelsesendring)
- Bygg-CPU/tid er begrenset
- Du vil ha enklere verktøy (bredere bibliotekstøtte)
- CDN-en din støtter ikke AVIF ennå
- Publikummet ditt heller mot veldig-gamle-Android (regioner med gamle enheter)
Velg AVIF + WebP-fallback når
- Statisk nettsted med forhåndsbygde ressurser
- Fototungt nettsted (e-handel, portefølje, nyheter)
- Båndbreddekostnader betyr noe (CDN-regninger, mobilbrukere)
- Core Web Vitals er kritiske (bildevekt er flaskehalsen din)
- Du har bygg-CPU å avse
Fallback-kjeden i praksis
HTML <picture>-elementet er standardmåten å levere flere formater. Nettleseren velger det første formatet den forstår.
<picture>
<source type="image/avif" srcset="/img/hero.avif" />
<source type="image/webp" srcset="/img/hero.webp" />
<img src="/img/hero.jpg" alt="Heltebilde" loading="lazy" />
</picture>Moderne rammeverk genererer dette automatisk:
| Rammeverk | Hvordan |
|---|---|
| Astro | <Image src=... formats={['avif', 'webp']} /> |
| Next.js | next/image + images.formats-konfigurasjon |
| Gatsby | gatsby-plugin-image med formats |
| Vite | vite-imagetools-plugin |
| Nuxt | @nuxt/image med format-array |
| Hugo | Sideressurser + Resize + Convert |
Send ikke AVIF uten WebP
De 6 % av brukere uten AVIF-støtte ser ikke et "ødelagt bilde", de ser ingenting. <picture>-taggen faller gjennom til <img> hvis alle <source>-oppføringer mislykkes. Inkluder alltid WebP (eller JPG) som sikkerhetsnett.
Kvalitetsglider-kartlegging
Tallet du setter i k= for AVIF tilsvarer ikke JPG/WebP. Grove ekvivalenter:
| Visuell kvalitet | JPG k | WebP k | AVIF k |
|---|---|---|---|
| Nesten tapsfri | 95 | 95 | 80 |
| Visuelt tapsfri | 90 | 85 | 65 |
| Skarp ved normal visning | 85 | 80 | 60 |
| Akseptabel | 75 | 70 | 50 |
| Synlig komprimering | 60 | 55 | 35 |
| Tunge artefakter | 40 | 35 | 20 |
Standard for web: JPG 85, WebP 80, AVIF 60, alle produserer visuelt identisk utdata.
Kodingstips for beste resultat
- Kod alltid fra originalen (ikke fra en JPG til omkodet WebP), ellers sammensetter du tap.
- For fotografier, bruk k60 AVIF / k80 WebP, sweet spot.
- For grafikk med skarpe kanter, bytt til tapsfri WebP eller PNG-fallback. AVIF tapsfull kan gjøre fine linjer uskarpe.
- Bry deg ikke om AVIF for miniatyrbilder under 100x100, filstørrelsesforskjellen er liten sammenlignet med kodingskostnaden.
- Fjern metadata (EXIF, ICC) når mulig, sparer ytterligere 10-30 KB per bilde.
Hva med JPEG XL?
JPEG XL (JXL) er et nyere format som noen kalte “AVIF-morderen” i 2022. Per 2026:
- Chrome fjernet støtte i 2023 (kontroversiell beslutning).
- Safari støtter det (siden iOS 17).
- Firefox: bak et flagg.
Ikke verdt å distribuere i produksjon ennå. Nettleserstøttehistorien er for usikker. Kom tilbake i 2027.
Oppsummering
For 90 % av nettsteder i 2026:
- Byggepipeline koder hvert bilde til AVIF + WebP + JPG/PNG.
<picture>-taggen i HTML leverer det riktige basert på nettleseren.- JPG-kvalitet 85, WebP 80, AVIF 60 som standard, visuelt identiske.
- Hopp bare over AVIF for små bilder eller dynamiske genereringsveier.
- Mål med Core Web Vitals før og etter, bildevekt bør synke ~70 %.
Du kan konvertere de eksisterende ressursene dine akkurat nå med JPG til WebP, PNG til WebP eller batchbehandle via Konverter bilde. Alt kjører lokalt, ingen opplasting, ingen server.