AVIF och WebP – nya filformat för bilder på webben

Webben handlar mycket om bilder. Många använder JPEG, PNG och GIF som filformat på webben. Men det finns två filformat som ger oss ännu mindre filstorlekar och hög bildkvalitet. Filformaten är AVIF och WebP. Blixtsnabbt internet ger oss möjlighet att använda fler bilder på webben är tidigare. Men majoriteten surfar på webben med mobila enheter och alla har inte möjlighet att använda snabbt 5G. En del är fortfarande beroende av 4G, och i vissa situationer t.o.m. det långsammare 3G. Det gör att mindre filstorlekar fortfarande är högintressant.

Det rekommenderade filformatet för bilder på webben har länge varit JPG/JPEG (Joint Photographic Experts Group). JPEG har gett oss hög bildkvalitet kombinerat med små filstorlekar. Men AVIF och WebP gör ett ännu bättre jobb. Idag kan du spara bilder i båda filformaten i Photoshop och alla webbläsare stödjer filformaten.

Men om man inte kan testa i Photoshop så kan använda Squoosh som är en gratistjänst som Google Chrome Labs tillhandahåller. Där kan man ladda upp bilder i en massa olika filformat och konvertera dom online.

>> Ta mig till Squoosh här

AVIF

Bilder i filformatet AVIF är ungefär 50% mindre än en JPEG-fil i motsvarande kvalitet.  Med hjälp av Squoosh kan du ställa in både högsta och lägsta kvalitet oberoende av varandra.

I exemplet nedan ser vi en bild som väger 253 kB efter att den är sparad i JPEG-formatet i Photoshop. Om jag väljer en kvalitet på 62 hamnar bilden på 46,3 kB  vilket är högsta möjliga kvalitet.

Men man kan ytterligare minska filstorlekarna. När jag testar kan jag dra reglaget ner till 30 utan en märkbar skillnad i kvalitet och då väger bilden 29,8 kB.

Om jag fortsätter att minska max-kvaliteten ytterligare börjar man se att färger blir förvrängda en del. Det finns en gräns för allt. Men resultatet är ändå en bild som väger betydligt mindre än JPEG-varianten.

Spara som AVIF i Photoshop

När du sparar en bild i AVIF-format i Photoshop kan du styra balansen mellan bildkvalitet och filstorlek.

Under Färgkomprimering ger Förstörande komprimering mindre filer och passar bra för bilder som ska publiceras på webben, medan Icke-förstörande bevarar maximal bildinformation men ger större filer.

Med reglaget Kvalitet bestämmer du hur hårt bilden ska komprimeras – högre kvalitet ger normalt större filstorlek.

Under Färgföljsamhet kan du välja hur färginformationen ska lagras; 4:2:2 reducerar en del färginformation för att minska filstorleken, ofta utan någon tydlig visuell skillnad i fotografier. Du kan även välja om metadata, exempelvis EXIF- och XMP-information, ska följa med.

Inställningen Hastighet påverkar hur snabbt filen kodas – långsammare kodning kan ge effektivare komprimering och därmed bättre förhållande mellan kvalitet och filstorlek.

Störst skillnad på bilder med genomskinlighet

Även om vi kan spara filstorlekar en del i bilden ovan ser man de stora skillnaderna i bilder som med genomskinlighet. JPEG-bilder kan inte vara genomskinliga så när bilder innehåller genomskinlighet måste vi spara dom i PNG-formatet.

Den här bilden på hunden väger är 1000×1000 px och väger hela 1,3 Mb. Ställer man in filformatet på AVIF i högsta kvalitet får vi ut en bild i 87,9 kB. Och vi kan inte se någon kvalitetsskillnad överhuvudtaget.

Och jag provar att dra ner kvaliteten till 30 för att se hur det påverkar kvaliteten och man ska ha otroligt skarpa ögon för att se att bildkvaliteten försämras märkbart när filstorleken blir 60,6 kB.

Men även här börjar vi kunna se skillnader om vi går ner under 30. Då blir färger utsmetade och detaljnivån blir betydligt sämre.

Filformatet är utvecklat av Alliance for Open Media tillsammans med Google, Cisco och Xiph.org.

WebP

Google började arbeta med WebP (uttal: Weppy) redan 2010 och många webbplatser använder redan WebP. Det använder både förstörande och förlustfri komprimering för att få ner filstorlekarna. Här är stödet för webbläsare större än AVIF.

WebP-komprimering i Squoosh har två reglage, Effort och Quality, som man kombinerar för att uppnå mindre filstorlekar. Det finns också en del avancerade alternativ för kvalitet på Alpha filter, styrka och skärpa.

I exemplet med fågeln nedan väger originalbilden som JPEG 206 kB och med en kvalitet på 75 väger WebP-bilden 29,3 kB. Ganska imponerande eller hur?

Och vi kan ju prova att trycka ner filstorleken ytterligare genom att minska kvaliteten till 25. I den kvaliteten får vi en bild som väger 14,7 kB, men också en märkbar reducering av detaljer i bilden.

Även för WebP ser vi den största skillnaden i bilder med genomskinlighet. Bilden på papegojan väger som PNG hela 583 kB, men som WebP med en kvalitet på 75 väger endast 45,1 kB utan en för ögonen märkbar kvalitetsskillnad.

Ställer jag in bilden på Lossless väger samma bild 384 kB, alltså betydligt större än med en förstörande komprimering, men ändå en besparing på 34% jämfört med originalbilden.

Än så länge är det ganska knöligt att spara ut filer i AVIF-formatet på en dator om du inte känner dig bekväm med att använda terminalfönstret. WebP finns det ett tillägg för Photoshop som du kan ladda ner här. (https://developers.google.com/speed/webp/docs/webpshop) och de flesta nya versioner av webbläsare har stöd för WebP, även Apples kommande BigSur.

Spara som WebP i Photoshop

När du sparar en bild i WebP-format i Photoshop kan du välja mellan icke-förstörande och förstörande komprimering.

Icke-förstörande bevarar bildinformationen utan kvalitetsförlust men ger vanligtvis en större fil. För webbilder används ofta förstörande komprimering, där du med inställningen Kvalitet bestämmer balansen mellan bildkvalitet och filstorlek. Ett värde runt 70–80 är ofta en bra utgångspunkt för fotografier på webben, men resultatet bör alltid kontrolleras visuellt.

Du kan också välja om XMP- och EXIF-metadata samt Photoshop extra ska följa med filen. För bilder som ska publiceras på en webbplats kan metadata ofta utelämnas för att hålla filstorleken nere.

WebP är särskilt användbart för webben eftersom formatet kan ge betydligt mindre filer än exempelvis JPEG och PNG samtidigt som en hög visuell kvalitet kan bibehållas.

Kan jag använda AVIF eller WebP?

De här filformaten är numera branschstandard. Jag möter så många som inte riktigt känner till AVIF och WebP och än mindre använder dom på webbplatsen. Men de flesta webbsystem har stöd för båda filformaten idag. I princip alla webbläsare fungerar bra med WebP och de lite senare versionerna även med AVIF.

Vill du lära dig mer om Photoshop?

Vi har både klassrumskurser, online- och distanskurser

>> Grundkurs Photoshop (klassrum/online)
>> Fortsättningskurs Photoshop (klassrum/online)
>> Lightroom (klassrum/online)