WebP eller AVIF? Så väljer du rätt bildformat utan att tappa skärpa

Kampen om webbplatsens snabbaste sekunder

Bilder säger mer än tusen ord, men på webben kan varje bild också säga något om hur snabbt en webbplats känns. En stor hero-bild, ett högupplöst produktfoto eller en bakgrundsbild från en kampanjsida kan väga betydligt mer än resten av sidans innehåll tillsammans. När filen laddas långsamt får besökaren vänta på det viktigaste visuella intrycket, och i en e-handel kan den fördröjningen påverka både förtroende, engagemang och köpvilja.

Det klassiska valet har länge varit en kompromiss mellan kvalitet och prestanda. Hög komprimering gav mindre filer, men kunde samtidigt skapa blockighet, suddiga konturer eller fula färgövergångar. Moderna format har förändrat den balansen. WebP och AVIF kan minska filstorleken kraftigt utan att detaljerna behöver försvinna, särskilt när bilden exporteras i rätt dimensioner och med en genomtänkt kvalitetsnivå. För den som vill förstå hur formaten skiljer sig i praktiken finns en användbar genomgång av Är Webp eller Avif bäst för din hemsida 2025?

WebP som den pålitliga arbetshästen

WebP lanserades av Google 2010 som ett modernare alternativ till JPEG, PNG och GIF. Formatet bygger på teknik från VP8 och stöder både förstörande och förlustfri komprimering. Det innebär att WebP kan användas för allt från fotografier och produktbilder till illustrationer med genomskinlig bakgrund. Formatet har också stöd för animering, vilket gör det användbart i fler situationer än ett traditionellt JPEG.

Den största styrkan är den praktiska balansen. WebP ger ofta betydligt mindre filer än motsvarande JPEG- eller PNG-bilder, samtidigt som avkodningen vanligtvis är snabb och förutsägbar. Stödet i moderna webbläsare är mycket brett, och formatet fungerar i dag med de flesta vanliga CMS-plattformar, bild-CDN:er och publiceringsverktyg. Det gör migreringen enklare, särskilt för webbplatsägare som vill förbättra prestandan utan att bygga om hela sin bildhantering.

WebP är ofta det säkraste valet när kompatibilitet, enkel administration och stabil leverans väger tyngre än den allra minsta möjliga filstorleken. Det passar särskilt bra för:

• produktbilder i nätbutiker där många bilder ska laddas på samma sida
• illustrationer och grafiska element med transparens
• bloggbilder, nyhetsbilder och redaktionellt innehåll
• animerade bilder där GIF skulle bli onödigt tungt
• webbplatser med äldre teknisk miljö eller många tredjepartslösningar

Vid mycket hård komprimering kan WebP fortfarande ge artefakter, särskilt i ansikten, tunna linjer och bilder med mjuka färgövergångar. Därför bör kvaliteten alltid bedömas visuellt i den storlek bilden faktiskt ska visas. En praktisk jämförelse av formaten och deras användningsområden finns i guiden WebP eller AVIF för hemsidan.

AVIF och konsten att halvera filstorleken

AVIF bygger på AV1, en modern och öppen videokodek som även kan användas för stillbilder. Tekniken är mer avancerad än WebP och kan ofta skapa mindre filer vid jämförbar visuell kvalitet. I vissa tester har AVIF blivit omkring 50 procent mindre än WebP och ännu mindre jämfört med JPEG, men resultatet beror på motiv, upplösning, färger, komprimeringsinställningar och vilket verktyg som används.

För fotografier med många detaljer är AVIF särskilt intressant. Formatet kan hantera högre färgdjup, HDR och bredare färgomfång, vilket ger större spelrum för bilder med starka ljuskontraster, djupa skuggor eller nyanserade färgövergångar. Det är värdefullt för exempelvis mäklarbilder, modefotografi, resebilder och produktbilder där materialets färg och yta behöver återges övertygande.

AVIF:s styrka handlar dock inte bara om mindre filer. När en bild är den största synliga resursen på en sida kan minskad datamängd korta tiden innan sidan upplevs som färdig. Det kan påverka Largest Contentful Paint, eller LCP, som mäter när sidans största innehållselement blir synligt. Samtidigt är AVIF mer krävande att koda och kan i vissa miljöer ta längre tid att avkoda än WebP. Webbläsarstöd är också något smalare, särskilt om besökare använder äldre enheter eller äldre versioner av webbläsare. Den tekniska uppbyggnaden beskrivs mer utförligt i AVIF:s tekniska översikt.

• Välj AVIF när minsta möjliga filstorlek är särskilt viktig.
• Prioritera AVIF för stora fotografier och prestandakritiska sidor.
• Testa alltid skärpa, hudtoner, texturer och färgövergångar före publicering.
• Behåll WebP eller JPEG som fallback för enheter som saknar AVIF-stöd.

Skillnaderna sida vid sida

Det finns inget format som är bäst i alla situationer. AVIF vinner ofta när fokus ligger på komprimeringsgrad och kvalitet per byte, medan WebP vanligtvis vinner på snabbare kodning, bredare kompatibilitet och enklare arbetsflöden. För en webbplats med tusentals bilder kan den skillnaden bli praktisk. En automatisk bildtjänst behöver inte bara skapa små filer, utan också göra det snabbt, stabilt och utan att överbelasta serverns processor.

Vid on-the-fly-generering, där bilder konverteras när en besökare efterfrågar en viss storlek, kan AVIF:s tyngre kodning öka CPU-användningen. För stora bibliotek är det därför klokt att förgenerera de vanligaste varianterna eller använda en bild-CDN som hanterar cache och konvertering. Tabellen ger en förenklad överblick, men verkliga resultat bör alltid mätas med de motiv och enheter som webbplatsens besökare faktiskt använder.

Praktisk strategi för implementering och Core Web Vitals

Bildoptimering påverkar teknisk SEO eftersom bilder ofta hör till sidans största resurser. En bild som visas i 800 pixlars bredd bör normalt inte levereras som en fil på 4000 pixlar. Även ett effektivt format blir onödigt tungt om dimensionerna är mycket större än den faktiska visningen. Chrome rekommenderar därför både moderna format, lämplig komprimering och responsiva bildstorlekar i sin dokumentation om effektiv bildleverans.

LCP förtjänar särskild uppmärksamhet. Om sidans största synliga element är en hero-bild eller en produktbild måste den prioriteras, komprimeras och levereras i rätt storlek. Lazy loading passar ofta bra för bilder längre ner på sidan, men bör normalt inte användas på den bild som ska bidra till LCP. Alt-text ska dessutom beskriva informativa bilder på ett tydligt sätt, medan dekorativa bilder kan ha ett tomt alt-attribut.

HTML-elementet picture gör det möjligt att låta webbläsaren välja ett modernt format och samtidigt erbjuda fallback. En enkel struktur kan se ut så här i princip:

<picture> först en källa för AVIF, därefter en källa för WebP och slutligen en vanlig JPEG- eller PNG-bild i det vanliga <img>-elementet. På så sätt får kompatibla webbläsare den effektivaste filen, medan äldre enheter fortfarande kan visa bilden.

1. Exportera originalet med tillräcklig kvalitet och spara en orörd masterfil utanför publiceringssystemet.
2. Beskär eller skala bilden till de verkliga användningsområdena, exempelvis hero, kort, mobil och produktgalleri.
3. Konvertera till AVIF och WebP med flera kvalitetsnivåer, och jämför detaljer i 100 procents visning.
4. Publicera formatvarianterna genom en bild-CDN, ett CMS-tillägg eller en automatiserad bildpipeline.
5. Använd srcset och sizes så att webbläsaren kan välja en passande upplösning för skärm och enhet.
6. Mät resultatet i PageSpeed Insights, Lighthouse och Search Console efter publicering.

Undvik att skapa fler varianter än webbplatsen behöver. Många nästan identiska storlekar kan öka lagring, cacheposter och komplexitet. Ett balanserat system med några väl valda bredder, exempelvis för mobil, mindre laptop och stor skärm, ger ofta bättre kontroll än en oöverskådlig mängd filer.

Ge din webbplats den visuella skärpa den förtjänar

Valet mellan WebP och AVIF behöver inte bli ett ultimatum. WebP är en trygg standard för de flesta webbplatser, särskilt när enkel publicering, animering och bred kompatibilitet är centralt. AVIF är ett starkt komplement när fotografierna är stora, trafiken är mobil och varje sparad kilobyte kan förbättra upplevelsen. En kombination med AVIF först, WebP därefter och JPEG eller PNG som fallback ger ofta den bästa helheten.

Börja med de bilder som påverkar mest: startsidans huvudbild, populära produktsidor och sidor där LCP är svagt. Kontrollera först dimensionerna, skapa sedan moderna format och jämför den faktiska bildkvaliteten på mobil och större skärm. Små tekniska justeringar kan göra stor skillnad för laddtid, tillgänglighet, konvertering och varumärkets visuella intryck. När bilden laddar snabbt och fortfarande känns skarp får besökaren både den upplevelse och den trovärdighet som webbplatsens innehåll förtjänar.