WebP vs AVIF 2026: hvilken bør du bruge til dit websted
Ærlig 2026-sammenligning: WebP vs AVIF til webydelse, browserunderstøttelse, filstørrelse, kodningshastighed og den praktiske fallback-kæde, med ægte målinger.
WebP udkom i 2010. AVIF udkom i 2019. I 2026 er begge modne, begge har ~94 %+ global browserunderstøttelse, og begge knuser JPG/PNG på filstørrelse. Men at vælge mellem dem, eller hvordan man bruger begge, snubler stadig udviklere og indholdsforvaltere. Denne guide giver dig ægte målinger og en ren beslutningsregel.
TL;DR, 2026-svaret
Til statiske websteder og forudbyggede ressourcer: AVIF først, WebP-fallback, JPG/PNG sidst. <picture>-tagget håndterer kæden 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>Til dynamisk størrelsesændring, realtidsgenerering eller begrænsede CPU-budgetter: kun WebP. AVIF-kodning er for tung efter behov.
Beslutningen i én sætning
Hvis billedet genereres én gang og serveres for evigt, brug AVIF + WebP-fallback. Hvis det genereres per anmodning, brug kun WebP.
Ægte målinger: samme kilde, begge formater
10 repræsentative fotografier komprimeret ved “visuelt tabsfri” 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 % |
| Portræt (hudtoner) | 1,8 MB | 0,9 MB | 0,55 MB | −69 % |
| Produkt på hvid BG | 1,1 MB | 0,45 MB | 0,28 MB | −75 % |
| Bybillede (høj detalje) | 3,2 MB | 1,8 MB | 1,1 MB | −66 % |
| Madfotografi | 2,1 MB | 1,0 MB | 0,62 MB | −70 % |
| Landskab med tekstur | 2,7 MB | 1,6 MB | 1,0 MB | −63 % |
| Logo / illustration | 380 KB | 120 KB | 95 KB | −75 % |
| Skærmbillede (UI) | 540 KB | 210 KB | 165 KB | −69 % |
| Mode (høj kontrast) | 1,9 MB | 0,95 MB | 0,58 MB | −69 % |
| Makro / naturdetalje | 2,5 MB | 1,4 MB | 0,85 MB | −66 % |
| Gennemsnit | 1,86 MB | 0,97 MB | 0,61 MB | −70 % |
Til et typisk billede sparer AVIF ~70 % over JPG, ~37 % over WebP. Besparelserne er enorme i skala: 100 fotografier = 130 MB JPG, 60 MB WebP, 36 MB AVIF.
Virkelighedstjek for browserunderstøttelse
| Browser | WebP | AVIF | Markedsandel (2026) |
|---|---|---|---|
| Chrome (desktop + 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 | Aldrig | Aldrig | <1 % |
| Kombineret understøttelse | ~99 % | ~94 % | n/a |
6 % AVIF-gab
De 6 % uden AVIF er hovedsageligt: (a) Android < 7 stadig i brug i nogle regioner, (b) gamle virksomheds-Edge/IE-rester, (c) indlejrede WebViews i ældre apps. Send altid en WebP-fallback, det dækker dem alle.
Kodningshastighed: WebP-fordelen
AVIF-komprimering er tungere, fordi codec’en er mere kompleks (HEVC-afledt). På en typisk arbejdsmængde:
| Operation | WebP (libwebp) | AVIF (libaom) | Forskel |
|---|---|---|---|
| 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 miniaturer (300x300) | 8s | 38s | 4,7x langsommere |
| Byg helt billedbibliotek (1000 billeder) | 14 min | 1t 12min | 5,1x langsommere |
Til statiske webstedsbyg er dette fint, kod én gang, lever for evigt. Til dynamisk størrelsesændring (f.eks. brugere uploader avatarer efter behov) er 5x omkostningen uoverkommelig.
Hvornår skal du vælge WebP
Vælg kun WebP når
- Du genererer billeder efter behov (dynamisk størrelsesændring)
- Bygge-CPU/tid er begrænset
- Du vil have enklere værktøjer (bredere biblioteksunderstøttelse)
- Dit CDN understøtter ikke AVIF endnu
- Dit publikum hælder mod meget-gamle-Android (regioner med gamle enheder)
Vælg AVIF + WebP-fallback når
- Statisk websted med forudbyggede ressourcer
- Fototungt websted (e-handel, portfolio, nyheder)
- Båndbreddeomkostninger betyder noget (CDN-regninger, mobilbrugere)
- Core Web Vitals er kritiske (billedvægt er din flaskehals)
- Du har bygge-CPU at give
Fallback-kæden i praksis
HTML <picture>-elementet er standardmåden at levere flere formater. Browseren vælger det første format, 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="Heltebillede" loading="lazy" />
</picture>Moderne frameworks genererer dette automatisk:
| Framework | Hvordan |
|---|---|
| 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 | Sideressourcer + Resize + Convert |
Send ikke AVIF uden WebP
De 6 % af brugere uden AVIF-understøttelse ser ikke et "ødelagt billede", de ser ingenting. <picture>-tagget falder gennem til <img>, hvis alle <source>-poster fejler. Inkluder altid WebP (eller JPG) som sikkerhedsnet.
Kvalitetsslider-kortlægning
Det tal, du indstiller i k= til AVIF, svarer ikke til JPG/WebP. Grove ækvivalenter:
| Visuel kvalitet | JPG k | WebP k | AVIF k |
|---|---|---|---|
| Næsten tabsfri | 95 | 95 | 80 |
| Visuelt tabsfri | 90 | 85 | 65 |
| Skarp ved normal visning | 85 | 80 | 60 |
| Acceptabel | 75 | 70 | 50 |
| Synlig komprimering | 60 | 55 | 35 |
| Tunge artefakter | 40 | 35 | 20 |
Standard til web: JPG 85, WebP 80, AVIF 60, alle producerer visuelt identisk output.
Kodningstips til bedste resultat
- Kod altid fra originalen (ikke fra en JPG til omkodet WebP), ellers sammensætter du tab.
- Til fotografier, brug k60 AVIF / k80 WebP, sweet spot.
- Til grafik med skarpe kanter, skift til tabsfri WebP eller PNG-fallback. AVIF tabsbaseret kan gøre fine linjer uskarpe.
- Bekymr dig ikke om AVIF til miniaturer under 100x100, filstørrelsesforskellen er lille sammenlignet med kodningsomkostningen.
- Fjern metadata (EXIF, ICC) når muligt, sparer yderligere 10-30 KB per billede.
Hvad med JPEG XL?
JPEG XL (JXL) er et nyere format, som nogle kaldte “AVIF-morderen” i 2022. Per 2026:
- Chrome fjernede understøttelse i 2023 (kontroversiel beslutning).
- Safari understøtter det (siden iOS 17).
- Firefox: bag et flag.
Ikke værd at distribuere i produktion endnu. Browserunderstøttelseshistorien er for usikker. Kom tilbage i 2027.
Opsummering
Til 90 % af websteder i 2026:
- Byggepipeline koder hvert billede til AVIF + WebP + JPG/PNG.
<picture>-tagget i HTML leverer det rigtige baseret på browseren.- JPG-kvalitet 85, WebP 80, AVIF 60 som standard, visuelt identiske.
- Spring kun AVIF over til små billeder eller dynamiske genereringsveje.
- Mål med Core Web Vitals før og efter, billedvægt bør falde ~70 %.
Du kan konvertere dine eksisterende ressourcer lige nu med JPG til WebP, PNG til WebP eller batchbehandle via Konverter billede. Alt kører lokalt, ingen upload, ingen server.