AVIF står for AV1 Image File Format og er et billedformat baseret på AV1-teknologi. Det er udviklet til effektiv komprimering af både fotos og grafik. Ved sammenlignelig visuel kvalitet kan en AVIF-fil ofte være mindre end en JPEG, PNG eller WebP-fil.
Hvorfor AVIF kan gøre en side hurtigere
Billeder fylder ofte mest på en side. Når AVIF reducerer overførslen, kan indholdet nå besøgende hurtigere og bruge mindre mobildata. Det er særligt relevant for store indholdsbilleder og produktkataloger. En mindre billedfil kan forbedre LCP, men kun hvis billedet også er korrekt dimensioneret og bliver hentet i tide.
AVIF kan bruge både tabsgivende og tabsfri komprimering og understøtter transparens. Det gør formatet anvendeligt i flere situationer, men det betyder ikke, at alle aktiver automatisk bør konverteres. Små ikoner kan eksempelvis være bedre som SVG, og et allerede godt optimeret JPEG-billede giver ikke altid en stor gevinst.
Kompatibilitet og fallback
Moderne browsere understøtter AVIF, men en robust implementering har stadig en fallback. Med et <picture>-element kan browseren vælge AVIF først og derefter WebP eller JPEG. Et CDN kan også gøre det samme automatisk ud fra browserens capabilities. Undgå at sende AVIF til en klient, der ikke kan afkode det.
Selv med korrekt fallback skal du kontrollere, hvad der virkelig leveres. Cache, temaer og optimeringsplugins kan få en side til at bruge en gammel original i stedet for den nye variant.
AVIF i WordPress
WordPress, serverens billedbibliotek og dit optimeringsplugin skal alle understøtte AVIF, før arbejdsgangen er problemfri. Mange setups konverterer uploadede filer eller lader et CDN generere AVIF ved levering. Behold den oprindelige fil som redigeringsgrundlag; AVIF-varianten er primært en web-levering.
- Upload et kvalitetssikret originalbillede i passende dimensioner.
- Aktivér AVIF-generering i ét klart valgt plugin eller CDN.
- Kontrollér billedets URL, MIME-type og fallback i browserens Network-panel.
- Undtag billedet over folden fra lazy loading, hvis det er sidens LCP-element.
Sådan vælger og måler du
Eksportér flere kvalitetsniveauer og sammenlign ved den størrelse, brugeren ser. Kig efter udviskede detaljer, banding i himmel og artefakter omkring tekst eller kontrastfulde kanter. Mål derefter de overførte bytes og renderingstiden på en repræsentativ mobilforbindelse. AVIF er et stærkt valg, når billedkvaliteten holder, og din leveringskæde kan håndtere format og fallback korrekt.