Så använder du AVIF-bilder på din webbplats

De viktigaste stegen

1. Välj en bild som redan används på en sida och spara originalet.
2. Skapa en AVIF-version och kontrollera kvaliteten.
3. Lägg in AVIF-bilden på ett sätt som ditt publiceringssystem stöder.
4. Kontrollera den publicerade sidan på en telefon och en dator.
5. Granska webbläsarens nätverksanrop för att se vilken bildfil som laddas.

Följande avsnitt går igenom vad du bör kontrollera i varje steg.

Kontrollera hur webbplatsen hanterar AVIF

Ett publiceringssystem kan acceptera AVIF i mediebiblioteket men behandla filen annorlunda än JPG eller PNG. Kontrollera därför både att filen går att lägga in och att den fungerar på en publicerad sida.

Testa med en bild:

• Accepterar mediebiblioteket filen?
• Visas bilden i sidredigeraren?
• Fungerar den på den publicerade sidan?
• Skapas de mindre bildversioner som behövs, om systemet brukar skapa sådana?

En bildoptimeringstjänst eller ett CDN kanske redan levererar dina bilder som AVIF. Kontrollera hur det fungerar i dag innan du byter filer manuellt. En JPG i mediebiblioteket visar inte i sig vilket format besökarna får.

Förbered en bild för testet

Välj en bild som är typisk för din webbplats. Ett produktfoto, en huvudbild till en artikel eller en genomskinlig illustration ger ett bättre underlag än en slumpmässig testbild.

Använd konverteraren för bildens ursprungliga format:

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

Pixilos AVIF-konverterare bevarar de ursprungliga pixelmåtten och använder en fast inställning för förstörande komprimering. De skapar en enda stillbild. Animation, ursprunglig HDR-information och metadata bevaras inte.

Jämför den nedladdade AVIF-bilden med originalet. Granska särskilt textens läsbarhet, tunna kanter, färgövergångar och genomskinliga områden. Kontrollera även filstorleken: konverteringen gör inte alltid filen mindre.

Behåll den nuvarande versionen om kvaliteten inte räcker eller filen blir större. Att byta format är inget mål i sig.

Lägg in AVIF via publiceringssystemet

Om du använder en sidbyggare eller ett innehållshanteringssystem lägger du till AVIF-filen i mediebiblioteket och väljer den som ny bild i det aktuella bildelementet.

Behåll visningsstorleken och beskärningen under testet. Då kan du bedöma formatbytet utan att samtidigt ändra sidans layout.

Kontrollera vid bytet:

• alternativtexten
• bildförhållandet och beskärningen
• eventuell bildtext och länk
• layouten på datorer och mobila enheter.

Att ändra filändelsen i en URL konverterar inte bilden. Publicera en riktig AVIF-fil eller använd en tjänst som utför konverteringen.

Erbjud ett alternativt format vid behov

Om du redigerar HTML-koden själv kan du använda ett picture-element för att erbjuda AVIF i första hand och JPG som alternativ.

I exemplet visar båda filerna samma bild med måtten 1200 × 800 pixlar. Anpassa sökvägar, mått och alternativtext till din bild.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Blå ryggsäck sedd framifrån">
</picture>

En webbläsare med AVIF-stöd kan välja AVIF-versionen. Om den inte stöder det angivna formatet använder den JPG i det här exemplet. För en genomskinlig bild bör alternativet bevara genomskinligheten, till exempel PNG. Se MDN:s dokumentation om picture-elementet.

Alternativet hanterar stöd för bildformatet. Det rättar inte automatiskt en felaktig AVIF-adress eller en trasig fil.

Om publiceringssystemet hanterar alternativa format automatiskt använder du dess inbyggda funktion.

Kontrollera vilken bild webbläsaren laddar

Att bilden visas på sidan bevisar inte att AVIF används. Webbläsaren kan ladda den gamla bilden, en mindre version eller en fil från en optimeringstjänst.

I Chrome kan du kontrollera det med utvecklarverktygen:

1. Öppna den publicerade sidan och utvecklarverktygen.
2. Välj fliken Network och filtret Img.
3. Aktivera Disable cache och ladda om sidan med verktygen öppna.
4. Öppna anropet för bilden du vill kontrollera.
5. Kontrollera adressen och svarets Content-Type. För AVIF är typen image/avif.

Filändelsen är inte den enda ledtråden: en optimeringstjänst kan leverera AVIF från en adress som slutar på .jpg. I Network-panelen kan du även kontrollera den överförda filens storlek. Se Chromes guide för att granska nätverksanrop.

Om sidan använder en separat mobilbild eller flera bildstorlekar kontrollerar du även deras anrop.

Kontrollera sidan innan du byter fler bilder

Granska bilden där den faktiskt används. Mediebibliotekets förhandsvisning visar inte mobilens beskärning, hur sidans bakgrund påverkar bilden eller om rätt version laddas.

Kontrollera att:

• hela bilden syns eller att beskärningen är avsiktlig
• text och viktiga detaljer fortfarande är tillräckligt tydliga
• genomskinliga områden visas rätt mot sidans bakgrund
• utrymmet som reserverats för bilden och sidans layout fortfarande stämmer
• webbläsaren laddar den förväntade filen.

Använd samma sida, fönsterstorlek och testinställningar när du jämför laddningen före och efter bytet. En enstaka snabbare laddning visar inte en bestående förbättring. Minskad filstorlek är lättare att kontrollera när bilderna har samma mått och godtagbar kvalitet.

Om AVIF-bilden inte visas

Kontrollera först om bildens direkta adress går att öppna i webbläsaren. Om den inte fungerar kontrollerar du filens plats och eventuella felmeddelanden från publiceringssystemet.

Om bilden fungerar direkt men sidan visar den gamla versionen kontrollerar du bildelementets adress, andra bildstorlekar och webbplatsens cache. Att kringgå webbläsarens cache tömmer inte publiceringssystemets eller CDN:ets cache.

Om orsaken fortfarande är oklar återställer du det fungerande originalet i bildelementet och undersöker AVIF-stödet innan du testar igen.

Vanliga frågor

Ska alla bilder på webbplatsen bytas till AVIF?

Nej. Byt de bilder som ger tydligt mindre filer och fungerar i publiceringssystemet med godtagbar kvalitet.

Räcker det att lägga till AVIF i mediebiblioteket?

Nej. Du måste också välja bilden på sidan. Kontrollera den publicerade sidans nätverksanrop för att se vilken fil som laddas.

Behöver AVIF alltid en alternativ bild?

Det beror på besökarnas webbläsare och hur du publicerar bilderna. Ett annat format är användbart för miljöer där AVIF inte fungerar.

Varför minskar inte den nya AVIF-bilden storleken på filen som sidan laddar?

Sidan kan fortfarande använda den gamla bilden eller en annan version som publiceringssystemet har skapat. Själva AVIF-filen kan också vara större. Kontrollera det faktiska anropet och jämför filer med samma pixelmått.

Sammanfatta medChatGPT (öppnas i en ny flik)Grok (öppnas i en ny flik)Google (öppnas i en ny flik)Perplexity (öppnas i en ny flik)Claude (öppnas i en ny flik)