AVIF-bildgranskning

Konvertera JPEG till AVIF bara där sidan blir snabbare

AVIF är mest användbart när du behandlar det som en bildgranskning, inte som en generell exportinställning. Denna guide hjälper dig hitta JPEG-bilder som förtjänar AVIF, välja granskningsprocess och undvika att publicera mindre men visuellt sämre filer.

Snabbt omdöme

Konvertera undantagen, inte hela mediamappen

Det bästa beslutet för JPEG till AVIF börjar med sidans påverkan. Konvertera stora fotografiska filer som fortfarande saktar ner sidan efter storleksändring. Lämna vanliga miniatyrer, UI-skärmdumpar, diagram och redan små tillgångar på en enklare väg.

Stark kandidat Stor fotografisk LCP-bild

Använd AVIF när en hero- eller landningssidesbild fortfarande dominerar vikten efter storleksändring och WebP-export.

Kanske Viktig men inte dominerande

Testa AVIF bara om den aktuella filen fortfarande är betydande tung eller sidan har ett tydligt hastighetsproblem.

Undvik Små, grafiska eller ogranskade tillgångar

Hoppa över AVIF när bilden är liten, mest UI, texttung eller du inte kan granska resultatet före publicering.

Börja med bildgranskning

Ställ dessa frågor innan du väljer AVIF

AVIF kan vara utmärkt, men det är ingen magisk lösning. Formatet spelar roll först när bilden är rätt storlek, rätt roll och granskad i den layout där besökare ser den.

Fråga Varför det är viktigt Åtgärd
Är den renderade storleken redan korrekt? AVIF kan inte fixa en 4000px-bild som visas i 900px. Ändra storlek först, jämför sedan format.
Påverkar denna bild LCP eller första intrycket? Stora foton ovanför vecket har större påverkan än dekorationer längre ner på sidan. Prioritera hero-, landnings- och kampanjbilder.
Är innehållet fotografiskt? AVIF fungerar oftast bäst på foton, inte på platta UI- eller logotypgrafik. Använd PNG, SVG eller WebP när skarpa kanter är viktigare.
Kan du granska resultatet i sammanhanget? AVIF kan dölja artefakter tills bilden visas i den verkliga layouten. Kontrollera mobilbredd, övergångar, ansikten och beskärning.
Har du en fallback-lösning? Inte alla miljöer hanterar moderna format på samma sätt. Publicera med bildmarkup eller motsvarande i ditt ramverk.

Kandidatval

Vilka JPEG-bilder är bra kandidater för AVIF?

Sök efter bilder där en mindre fil påverkar sidan, inte bara filhanteraren. De starkaste kandidaterna är oftast fotografiska, visuellt viktiga och tillräckligt stora för att påverka upplevd laddningstid.

Bästa kandidat

LCP-hero foto

En stor fotografisk hero som definierar första vyområdet och förblir tung efter storleksändring är oftast det starkaste användningsfallet för AVIF.

Bra kandidat

Kampanjbild för landningssida

En kampanj- eller produktbild kan motivera extra granskning när den visas högt upp på sidan och måste behålla ett polerat utseende.

Selektiv kandidat

Redaktionell huvudbild

Använd AVIF när bilden är tillräckligt stor för att spela roll, inte bara för att varje artikelbild exporteras igen.

Dålig kandidat

Texttunga skärmdumpar

Skärmdumpar, UI-fångster, diagram och ikoner tappar ofta textklarhet innan de gynnas av AVIF-komprimering.

Kvalitetsgranskning

Kopiera inte kvalitetsvärden mellan AVIF-verktyg

AVIF-kvalitetsreglage är inte universella. Ett värde som ser bra ut i en encoder kan vara för mjukt eller för hårt i en annan. Börja med verktygets standard eller ett medelvärde och bedöm resultatet på den riktiga sidan.

Målet är inte den minsta möjliga AVIF-filen. Målet är den minsta filen som fortfarande stödjer sidan: tillräckligt ren detalj, acceptabla övergångar, ingen störande texturförlust och ingen synlig färgförskjutning.

Granskningsordning
  1. Jämför med den storleksändrade JPEG- eller WebP-filen, inte originalfilen från kameran.
  2. Granska bilden i renderad desktopstorlek och i mobilbredd.
  3. Kontrollera ansikten, himlar, övergångar, skuggor, små texturer och varumärkesfärger.
  4. Bekräfta att filen verkligen laddas på sidan du planerar att publicera.

Visuella feltyper

AVIF-artefakter värda att kontrollera före publicering

En bra AVIF-export kan se utmärkt ut. En dålig kan misslyckas tyst: filen är mindre, men bilden känns platt, suddig eller brusig precis där användarna först tittar.

Bandning i himlar eller övergångar Mjuka bakgrunder kan visa steg när komprimeringen pressas för hårt.
Vaxliknande hud eller produkttextur Porträtt och produktytor kan förlora naturlig detalj även om filen ser skarp ut vid första anblick.
Otydlig fin detalj Löv, tyg, hår och små upprepande mönster kan bli suddiga på ett sätt som känns sämre än vad bytebesparingen är värd.
Färg- eller kontrastförskjutning Kampanjbilder och produktfoton behöver färgkontroller som är säkra för varumärket efter konvertering.
Beskärnings- och fokusfel En mindre fil är ingen vinst om responsiva beskärningar döljer den del av bilden som säljer sidan.

Leverans

Publicera AVIF med fallback, inte som blind ersättning

För viktiga sidbilder, håll leveransen enkel och förutsägbar. Använd AVIF först när det stöds, behåll WebP- eller JPEG-fallback, ange bredd och höjd, och låt inte webbläsaren upptäcka layoutstorlek sent.

Förladda bara en AVIF när det verkligen är LCP-bilden. Att förladda varje konverterad tillgång kan göra sidan mer belastad än snabbare.

HTMLBildmarkup med AVIF-fallback
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

Integritet och kontroll

Håll opublicerade kampanjbilder utanför slumpmässiga uppladdningsflöden

Stora JPEG-bilder är ofta inte neutrala filer. De kan innehålla opublicerade produkter, kundjobb, platsledtrådar, iscensatt kampanjmaterial eller filnamn som avslöjar intern information. Att ladda upp dem till en konverterare bör vara ett medvetet val, inte standard.

Ett lokalt arbetsflöde håller källfiler, utdatafiler och granskningssteg nära projektet. Det är särskilt användbart när samma landningssida kräver flera exportförsök innan den visuella balansen känns rätt.

Praktiskt arbetsflöde

En upprepbar JPEG-till-AVIF-process utan att varje bild blir ett projekt

  1. 01
    Samla bara de tunga kandidaterna

    Börja med en kort lista över stora JPEG-foton som fortfarande är viktiga efter normal storleksändring och WebP-export.

  2. 02
    Exportera AVIF-varianter separat

    Håll AVIF-utdata i en separat mapp så att käll-JPEG och vanliga WebP-filer är lätta att jämföra.

  3. 03
    Granska på den faktiska sidan

    Placera kandidaten i den riktiga komponenten eller mallen och kontrollera det synliga resultatet, inte bara konverterarens förhandsvisning.

  4. 04
    Publicera med fallback-markup

    Servera AVIF där det stöds och behåll WebP- eller JPEG-fallback för förutsägbar leverans.

  5. 05
    Dokumentera regeln

    Skriv ner vilka bildroller som får AVIF så att nästa uppdatering inte blir en gissningslek.

Formatgräns

Använd WebP som bas och AVIF som upptrappning

Ett bra arbetsflöde har oftast en standardväg och en undantagsväg. WebP är standard för vanliga webbplatsbilder eftersom det är praktiskt och brett stödd. AVIF används när stora fotografiska bilder fortfarande är för tunga.

Den gränsen håller artikelarbetsflödet snabbt samtidigt som du kan rädda bilder som dominerar vikt eller LCP.

Vanliga artikelbilder Använd WebP om inte en specifik fil fortfarande är för tung.
Stor fotografisk hero Testa AVIF efter storleksändring och jämför det visuella resultatet.
Skärmdumpar och UI Föredra PNG eller WebP när text och skarpa kanter är viktiga.
Ogranskade batch-exporter Publicera inte AVIF blint bara för att mappen är mindre.

Checklista före publicering

Kontrollera detta innan du ersätter en JPEG med AVIF

Källbilden ändrades i storlek AVIF-filen är nära den största visade storleken, inte kamerans original.
Sidan använder AVIF Nätverks- eller sidkällkontroller bekräftar att den nya filen verkligen levereras.
En fallback finns WebP eller JPEG finns kvar för den leveransväg du använder.
Kvaliteten granskades Den slutgiltiga sidan kontrollerades för artefakter på desktop och mobil.
Metadata är fortfarande relevant Alt-text, Open Graph-bilder och JSON-LD-bildreferenser har inte råkat gå sönder.
Originalet bevaras Käll-JPEG-filer finns kvar för framtida beskärningar, storlekar och re-exporter.

Vanliga frågor

Vanliga frågor

Praktiska svar för publiceringsbeslut om JPEG till AVIF