WebP eller AVIF: välj bildformat för din webbplats

Ett bildformat bestämmer hur bildens färger och detaljer sparas i en fil. WebP och AVIF kan göra bilderna mindre än JPEG och PNG utan att de ser märkbart sämre ut på webbplatsen. Mindre filer går snabbare att hämta, men välj komprimering efter motivet: ett produktfoto och en skärmbild med liten text ställer olika krav.

Filformat, bildstorlek och komprimering är olika saker

En bild kan vara 1 200 pixlar bred oavsett om den sparas som JPEG, WebP eller AVIF. Pixelmåtten anger bildens bredd och höjd. Filformatet och komprimeringen påverkar hur mycket plats bilden tar.

Du byter alltså inte format genom att döpa om bild.jpg till bild.webp. Bilden måste exporteras eller konverteras. Det kan göras i ett bildprogram, ett bildoptimeringstillägg eller en bildtjänst som skapar versioner åt webbplatsen.

Vid komprimering med kvalitetsförlust, lossy, tas en del bildinformation bort för att minska filstorleken. Det fungerar ofta bra för fotografier, där en liten förlust av detaljer sällan märks. Förlustfri komprimering, lossless, behåller bildinformationen och passar när text, tunna linjer och skarpa kanter behöver återges exakt.

WebP: mindre bildfiler för webben

WebP kan ersätta både JPEG-foton och många PNG-bilder. Formatet stöder förstörande och förlustfri komprimering, genomskinlighet och animation. Ett frilagt produktfoto kan därför sparas med transparent bakgrund även när själva fotot komprimeras med förlust.

För många webbplatser är WebP ett praktiskt standardval för vanliga artikelbilder och produktbilder. Du kan få en mindre fil än med JPEG och behålla tillräckligt med detaljer för att bilden ska se skarp ut. Googles WebP-dokumentation beskriver formatets olika komprimeringslägen.

AVIF: få ned filstorleken på fotografier

AVIF står för AV1 Image File Format och använder bildkomprimering från AV1-tekniken. Det kan ofta pressa ned fotots filstorlek ytterligare jämfört med WebP, särskilt när du kan acceptera en viss förlust av detaljer. Det är användbart för exempelvis stora miljöbilder och webbplatser med många produktfoton.

AVIF stöder också förlustfri komprimering, transparens och animation. Dessutom finns stöd för större färgomfång och HDR, vilket kan vara relevant för mer avancerad bildpublicering. För ett vanligt produktfoto är den främsta frågan enklare: hur liten kan filen bli utan att yta, färger eller viktiga detaljer försämras?

Det är inte säkert att AVIF blir minst för varje motiv. En platt illustration eller en skärmbild kan ge ett annat resultat än ett fotografi. Alliance for Open Media beskriver formatets egenskaper och den teknik det bygger på.

WebP, AVIF, JPEG och PNG jämförda

JPEG och PNG har fortfarande sin plats. JPEG fungerar i många äldre bildflöden och externa system. PNG är ett tydligt val när en skärmbild måste behålla text och linjer utan komprimeringsskador. En stor PNG-fil med ett fotografi är däremot ofta värd att ersätta med WebP eller AVIF.

Välj efter bilden du ska publicera

• Fotografier och stora miljöbilder: börja med AVIF eller WebP. Kontrollera framför allt ansikten, hår, lövverk och mjuka färgövergångar när du sänker kvaliteten.
• Produktbilder: WebP eller AVIF passar ofta bra, även för frilagda produkter. Behåll tillräckligt med detaljer för att kunden ska kunna se material, mönster och eventuell märkning. En liten fil hjälper inte om texten på förpackningen blir oläslig.
• Logotyper och enkla ikoner: använd i första hand SVG när du har ett bra vektororiginal. Det håller sig skarpt i olika storlekar. Behöver du en pixelbild med transparent bakgrund kan PNG eller förlustfri WebP passa.
• Skärmbilder och diagram: börja med PNG eller förlustfri WebP om bilden innehåller liten text och tunna linjer. Hård fotokomprimering kan ge grötiga bokstäver och missfärgade kanter.
• Korta bildanimationer: både WebP och AVIF kan användas i stället för GIF. Kontrollera att exportverktyget och platsen där animationen ska visas stöder just det animerade formatet.

Så stor skillnad blev det för två bilder

Vi sparade ett foto från Viseos webbplats och en pappersillustration i fyra format, alla i 1 200 × 800 pixlar. Procenttalen visar hur mycket mindre filen blev än PNG-versionen av samma bild. 1 kB motsvarar 1 000 byte.

Motiv	JPEG	PNG	WebP	AVIF
Foto	173,9 kB −85,6 %	1 211,4 kB Referens	135,9 kB −88,8 %	90,8 kB −92,5 %
Illustration	89,2 kB −92,2 %	1 150,6 kB Referens	46,0 kB −96,0 %	34,8 kB −97,0 %

AVIF gav de minsta filerna i den här jämförelsen. I de komprimerade versionerna syns också skillnader i fina detaljer och pappersstruktur.

Fungerar formaten i webbläsare och WordPress?

Både WebP och AVIF stöds i moderna versioner av Chrome, Edge, Firefox och Safari. Äldre webbläsare och externa system kan behöva JPEG eller PNG. En produktbild som fungerar på webbplatsen kan exempelvis ändå behöva exporteras i ett annat format för en marknadsplats eller ett nyhetsbrev.

I WordPress behöver även webbhotellets bildbehandling stödja formatet för att kunna skapa beskärningar och mindre bildversioner. AVIF-stöd infördes i WordPress 6.5. Under Verktyg → Webbplatshälsa → Information → Mediahantering kan du kontrollera serverns stöd. Se WordPress dokumentation om AVIF för detaljer.

Vill du erbjuda flera format kan webbplatsen använda picture. Webbläsaren väljer då den första källan i listan som den stöder:

<picture>
  <source srcset="produkt.avif" type="image/avif">
  <source srcset="produkt.webp" type="image/webp">
  <img src="produkt.jpg" width="800" height="600"
       alt="Grön vandringsryggsäck med öppet huvudfack">
</picture>

En bildtjänst eller ett tillägg kan också välja format automatiskt. Då behöver du inte själv bygga varje picture-element. Alla versioner ska visa samma bild, och bildmåtten ska vara anpassade till platsen där den visas.

Konvertera från ett bra original och gör en kort kontroll

Spara originalet och skapa webbversionerna från det. Att konvertera en redan suddig JPEG till AVIF återställer inga detaljer. Minska också pixelmåtten innan exporten; rätt format ersätter inte bildoptimering.

Jämför filstorleken och bilden i den storlek besökaren ser. Kontrollera text, detaljer och transparenta kanter. Efter publicering räcker en kontroll i webbläsarens nätverkspanel för att se att rätt fil verkligen hämtas. Visas huvudbilden ändå sent, gå vidare till LCP-guiden och kontrollera laddningsordningen.