WebP vs AVIF: Hvilket billedformat skal du faktisk bruge?
Billeder er normalt det tungeste på din side, så formatet betyder noget. AVIF er mindre, WebP er overalt – men beslutningen, som de fleste websteder bør træffe, er en helt anden.
Lad os få svaret ud af vejen: tjene AVIF til browsere, der accepterer det og WebP til alt andet, besluttet pr anmodning, og stoppe med at tænke på det. Indholdsforhandling har gjort dette til et løst problem, og intet websted bør manuelt vælge et format til alle sine besøgende i 2026.
Den mere nyttige diskussion er, hvorfor AVIF vinder, hvor det vinder, hvorfor WebP stadig gør det meste af arbejdet i praksis, og hvorfor formatargumentet er en distraktion fra en meget større besparelse, som de fleste websteder forlader på bord. Vi vil komme til den sidste del, fordi det er den, der virkelig betyder noget.
Hvordan de sammenlignes
| WebP | AVIF | |
|---|---|---|
| Udgivet | 2010 | 2019 |
| Baseret på | VP8-videocodec | AV1 videocodec |
| Typisk størrelse i forhold til JPEG | ~70% | ~50% |
| Kvalitet med aggressiv kompression | Godt | mærkbart bedre |
| Understøttelse af browser | Universal | Meget bred, ikke helt universel |
| Kodningshastighed | Hurtigt | Betydeligt langsommere |
| Gennemsigtighed | Ja, ja | Ja, ja |
| Animation | Ja, ja | Ja, ja |
| HDR / bred farveskala | Nr | Ja, ja |
| Maks. dimensioner | 16,383px | Ubegrænset effektivt |
Grov relativ størrelse med samme opfattede kvalitet. De enkelte billeder varierer meget, og det gør rangeringen ikke.
Hvor AVIF virkelig rykker fremad
AVIF er afledt af AV1-videocodecen, og den arver de værktøjer, der følger med et årti med ekstra forskning. Det viser det meste af det fotografiske indhold med farveovergange – himmel, hudtoner, mørke scener og alt med jævne overgange. Når JPEG og WebP begynder at optage bånd og blokere ved lave bithastigheder, forringes AVIF elegant. Hvis du kører en fotografering portefølje eller sælge noget visuelt, at forskellen er værd at have.
Hvor WebP stadig er det bedste værktøj
To situationer. Først små billeder - ikoner, miniaturebilleder, brugergrænseflader. AVIF bærer mere container overhead, og på en 3 KB miniature, overhead kan gøre AVIF-versionen større end WebP en. Sammenlign altid snarere end at antage.
For det andet, alt hvad du har brug for at indkode hurtigt eller ofte. AVIF-kodning er dyrt – ofte fem til ti gange langsommere end WebP med tilsvarende kvalitetsindstillinger. For en byggetid aktiv pipeline, der er irrelevant. For bruger-uploadede billeder, der behandles på efterspørgslen, er det en reel omkostning, hvilket er grunden til on-the-fly konverteringssystemer typisk cache aggressivt.
Du vil se JPEG XL nævnt i disse diskussioner. Det er teknisk fremragende, især for tabsfri rekomprimering af eksisterende JPEG'er, men browserunderstøttelse har haft en kompliceret historie, og det er ikke en realistisk standard i dag. Værd at se, ikke værd at planlægge rundt.
Den besparelse, der overskygger valget af format
Her er den del, der får WebP-versus-AVIF-debatten til at se lille ud.
Gå ind og se på billederne på dit websted – de faktiske filer, ikke hvad siden viser. På et meget stort antal websteder er et billede, der vises i et 400-pixel-bredt kort, en 3000-pixel-bred original, direkte fra en persons telefon eller et lagerbibliotek. Billedet er omkring 56 gange så stort som de pixeldata, der vises.
Konvertering af 3000px JPEG til AVIF kan tage det fra 1,8 MB til 900 KB. At ændre størrelsen til 800px, det faktisk har brug for på en høj DPI-skærm, tager det til omkring 60 kB. Resize er mere værd end formatet af en størrelsesorden, og ingen mængde klog kodning redder dig fra at sende pixels ingen nogensinde vil se.
- ndr først størrelsen, og vælg derefter et format. I den rækkefølge. Den anden beslutning er kun vigtig, når den første er truffet.
- Server på ca. 2 CSS-skærmstørrelsen til skærme med høj DPI, og ikke mere. Ud over 2 er forskellen ikke synlig.
- Brug responsivt srcset, så en telefon slet ikke downloader versionen i desktopstørrelse.
- Angiv attributter for bredde og højde. Gratis, og det forhindrer layoutskift, mens billedet indlæses.
- Lad aldrig dit LCP-billede være dovent. Det er det eneste billede, der skal komme med det samme.
Gør det uden et byggetrin
Hver browser sender en Accept overskrift, der viser de billedformater, den kan håndtere. En kant, der læser, at header kan konvertere og ændre størrelse på flue: du uploader en høj kvalitet original, og hver besøgende modtager det mindste format deres browser understøtter, på dimensionerne deres layout behov, cachelagret efter den første anmodning, så konverteringsomkostningerne betales én gang.
Det er værd at gøre, ikke fordi det er smart, men fordi det er den eneste tilgang, der overlever kontakten med virkeligheden. Manuel eksport pipelines arbejde, indtil nogen uploader en 4000px produkt foto gennem CMS på en fredag eftermiddag, og så de roligt stoppe med at arbejde og ingen bemærker i seks måneder.
Hurtige svar
Er AVIF bedre end WebP?
For fotografiske billeder, ja - AVIF-filer er typisk omkring 30% mindre end WebP på samme opfattede kvalitet, og holde op meget bedre under aggressiv komprimering på gradienter og mørke scener. WebP er stadig bedre til meget små billeder, hvor AVIFs overhead i beholderen kan gøre filerne større, og den koder fem til ti gange hurtigere. Ved at betjene begge via indholdsforhandling undgås valget helt.
Skal jeg udskifte alle mine JPEG-filer med AVIF?
Konverter i stedet for at erstatte. Behold originalerne af høj kvalitet, og generér AVIF- og WebP-versioner fra dem, så hver browser får det bedste format, den accepterer. Hvis du sletter originalerne, kan du ikke genkode, når formaterne ændres igen, og et lille antal klienter har stadig brug for et JPEG-tilbageblik.
Betyder størrelsen på et billede mere end formatet?
Som regel med stor margin. Et billede på 3000 pixel, der vises i en 400 pixel beholder, indeholder omkring 56 gange så mange pixeldata, som det faktisk vises. Når du ændrer størrelsen på den viste størrelse, sparer du typisk meget mere end ved at konvertere den overdimensionerede original til et moderne format. Rediger først størrelsen, og vælg derefter formatet.
Hvilke browsere understøtter AVIF?
Chrome, Firefox, Edge, Safari og de store mobile browsere understøtter alle AVIF i aktuelle versioner, der dækker det store flertal af reel trafik. Støtte er ikke helt universel på tværs af ældre installerede versioner, hvilket er grunden til AVIF bør serveres gennem indhold forhandling med WebP som reserve snarere end som det eneste format, der tilbydes.
Så det ærlige resumé: Formatspørgsmålet har et automatisk svar, og spørgsmålet værd at din opmærksomhed er, om du sender billeder ti gange større end det rum, de vises i. Se et produktbillede. Måske kan du ikke lide det, du finder.
Se, hvordan NordicCDN gør dette for dit websted:
Mads har arbejdet med IT – mest som vært – siden han var 16. Han tog tidligt ejerskab i en SaaS-virksomhed og var med til at udvide den til Visma, har opbygget og drevet datacenternetværk og fungeret som CTO for et dansk datacenter. Han startede NordicCDN for at gøre hurtig og sikker infrastruktur enkel at bruge.
