WebP vs AVIF: hvilket billedformat skal du faktisk bruge?
Billeder er normalt den tungeste ting på din side, så formatet betyder noget. AVIF klemmer mindre, WebP er overalt - men den beslutning, de fleste websteder skal træffe, er en helt anden.
Lad os få svaret af vejen: tjene AVIF til browsere, der accepterer det og WebP til alt andet, besluttet per anmodning, og stop med at tænke på det. Indhold forhandling har gjort dette til et løst problem, og ingen websted bør manuelt vælge et format for 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 rent faktisk betyder noget.
Hvordan de sammenligner
| WebP | AVIF | |
|---|---|---|
| Frigivet | 2010 | 2019 |
| Baseret på | VP8 video codec | AV1 video codec |
| Typisk størrelse vs JPEG | ~70% | ~50% |
| Kvalitet ved aggressiv kompression | Godt. | mærkbart bedre |
| Browserunderstøttelse | Universal | Meget bred, ikke helt universel |
| Kodningshastighed | Hurtig | Betydeligt langsommere |
| Gennemsigtighed | Ja. | Ja. |
| Animation | Ja. | Ja. |
| HDR / bred farveskala | Nr. | Ja. |
| Maks. dimensioner | 16,383px | Ubegrænset effektivt |
Grov relativ størrelse ved lignende opfattet kvalitet. Individuelle billeder varierer meget; rangeringen gør det ikke.
Hvor AVIF virkelig trækker fremad
AVIF er afledt af AV1 video codec, og det arver de værktøjer, der kommer med et årti med ekstra forskning. Det viser mest på fotografisk indhold med gradienter - himmel, hudtoner, mørke scener, alt med glatte overgange. Hvor JPEG og WebP begynder at bande og blokere ved lave bithastigheder, forringes AVIF yndefuldt. 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. For det første, små billeder ikoner, miniaturer, UI sprites. AVIF bærer mere container overhead, og på en 3 KB miniaturebillede, der overhead kan gøre AVIF version større end WebP en. Altid sammenligne i stedet for 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 ved sammenlignelige 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 dværger formatvalget
Her er den del, der gør WebP-versus-AVIF-debatten ser lille ud.
Gå og se på billederne på dit websted - de faktiske filer, ikke hvad siden viser. På et meget stort antal websteder er et foto, der vises i et 400-pixel-bredt kort, en 3000-pixel-bred original, direkte fra en persons telefon eller et lagerbibliotek. Billedet er 56 gange større end de viste pixels.
Konvertering af 3000px JPEG til AVIF kan tage det fra 1. 8 MB til 900 KB. At ændre det 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 af smart 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 betyder kun noget, når den første er lavet.
- Server på ca. 2 CSS-skærmstørrelsen for høj-DPI-skærme, og ikke mere. Ud over 2 forskellen er ikke synlig.
- Brug responsive srcset, så en telefon slet ikke downloader desktop-versionen.
- Indstil bredde og højdeattributter. Gratis, og det forhindrer layout skift, mens billedet indlæses.
- Aldrig doven-load dit LCP billede. Det er det billede, der skal ankomme med det samme.
Gør det uden et byggetrin
Hver browser sender en Accept header, 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 kontakt 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å den samme opfattede kvalitet, og holde op meget bedre under aggressiv komprimering på gradienter og mørke scener. WebP forbliver bedre for meget små billeder, hvor AVIF container overhead kan gøre filer større, og det koder fem til ti gange hurtigere. At tjene begge via indholdsforhandling undgår valget helt.
Skal jeg udskifte alle mine JPEG'er med AVIF?
Udskiftning i stedet for udskiftning. Hold dine høj kvalitet originaler og generere AVIF og WebP versioner fra dem, betjener hver browser det bedste format det accepterer. Sletning af originalerne efterlader dig ude af stand til at genkode, når formater ændres igen, og et lille antal klienter har stadig brug for en JPEG-tilbagefald.
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, bærer omkring 56 gange de pixel data, der faktisk vises. Ved at ændre størrelsen på den viste størrelse sparer du typisk meget mere end at konvertere den overdimensionerede original til et moderne format. ndr 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. Support 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 fallback 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 være opmærksom på er, om du sender billeder ti gange større end det rum, de vises i. Tjek et produktbillede. Du kan ikke lide, hvad du finder.
Se, hvordan NordicCDN gør dette for dit websted:
Mads har arbejdet i IT - for det meste hosting - 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, sikker infrastruktur enkel at bruge.
