Kort fortalt: AVIF er et moderne billedformat, der ofte kan give væsentligt mindre filer end JPEG og PNG ved samme visuelle kvalitet.
Hvorfor bruge AVIF?
- Mindre billedstørrelser ved samme visuelle kvalitet
- Kan forbedre LCP hvis hero-billeder bliver lettere
Når billeder fylder mindre:
- download tager kortere tid
- der bruges mindre data på mobil
- LCP bliver ofte bedre (hvis LCP-elementet er et billede)
Hvilken indflydelse har AVIF på performance?
AVIF påvirker typisk:
- LCP: hvis hero-billedet bliver mindre, kan det blive hentet og vist tidligere
- Speed Index: fordi mere indhold kan blive tegnet hurtigere
- Stabilitet: mindre risiko for at billed-download “kvæler” anden kritisk trafik
Men AVIF er ikke kun “gratis”. Encoding kan være tungere, og hvis du vælger for aggressiv kompression, kan kvaliteten blive dårlig.
Hvornår blev AVIF indført?
AVIF (AV1 Image File Format) bygger på AV1-kodeken. Formatet blev populært i takt med:
- bedre browser-support
- bedre tooling (image pipelines, CDN image optimization)
- behovet for mindre billeder på mobile netværk
I praksis er AVIF i dag en af de bedste muligheder, hvis du vil minimere billedstørrelser på tværs af mange skærmstørrelser.
AVIF vs WebP vs JPEG/PNG (hvornår hvad?)
En enkel måde at tænke det på:
- AVIF: ofte bedst kompression, især på fotos – brug som førstevalg hvis support er OK
- WebP: meget solidt og bredt understøttet – godt fallback
- JPEG: fallback når du vil være “sikker” og kompatibel
- PNG: kun til grafik med transparens eller når det er nødvendigt (eller brug AVIF/WebP med alpha)
Kvalitet: den vigtigste faldgrube
Hvis du komprimerer for hårdt, kan AVIF få:
- “mudret” look
- banding i gradients
- artefakter i tekst og linjer
Praktisk anbefaling:
- mål altid visuelt (side-by-side)
- test på mobilskærme
- brug en konservativ kvalitet til hero-billeder
Praktiske tips
- Brug fallback til WebP/JPEG hvor nødvendigt
- Servér responsive størrelser (srcset)
Udvidet praksis:
1) Brug responsive størrelser
Send ikke én stor fil til alle. Brug:
srcsetogsizes- flere varianter (fx 320/640/960/1280)
Det er ofte vigtigere end selve formatet.
2) Prioritér hero/LCP-billedet
Hvis hero-billedet er LCP:
- undgå lazy loading på hero
- overvej preload (målrettet)
- sørg for at det har korrekt dimension og format
3) Brug fallback korrekt
Brug picture:
source type="image/avif"- fallback
image/webp - fallback
imgmed jpeg/png
4) Pas på “over-optimering”
Hvis du gør alt for aggressivt (for mange varianter, for høj compression), kan du ende med:
- dårlig kvalitet
- mere kompleksitet
Hold det enkelt og mål effekten.
FAQ
Skal alle billeder være AVIF?
Ikke nødvendigvis. Start med de store billeder (hero, artikelbilleder), fordi de typisk påvirker LCP og dataforbrug mest.
UI-ikoner er ofte bedre som SVG, og små billeder giver mindre gevinst. Fokusér på de steder hvor billedbytes dominerer.
Kan AVIF gøre et site langsommere?
Sjældent i praksis, men det kan ske hvis du: - serverer AVIF uden fallback (så nogle brugere får problemer) - har en tung build/pipeline der gør deploy langsommere eller mere ustabil - ikke har caching (så dyr generering sker ofte)
Brug fallback (WebP/JPEG), og mål på rigtige sider før du ruller ud bredt.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Sådan fejlsøger du LCP fra start til slut
Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.
Brug fetchpriority og preload rigtigt på de vigtigste ressourcer
Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.
Forbedr LCP med billeder: hero, formater, preload og responsive størrelser
Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.
Fetchpriority, preload og preconnect: hvornår de hjælper og hvornår de gør skade
Lær hvornår fetchpriority, preload og preconnect faktisk forbedrer load, og hvornår de bare skaber mere støj og dårlig prioritering i browseren.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
