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

Webben handlar mycket om bilder. Idag använder vi JPEG, PNG och GIF som filformat på webben. Men nu har det dykt upp två nya filformat som lovar ännu mindre filstorlekar och hög bildkvalitet. Filformaten är AVIF och WebP. Snabbare internet ger oss möjlighet att använda fler bilder på webben är tidigare. Men fler surfar på webben med mobila enheter och få av dom har inte möjlighet att använda snabbt 5G. De flesta ä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. Problemet är att det inte går att spara bilder i de filformaten i Photoshop och att alla webbläsare stödjer filformaten.

Men även 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.

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. I skrivande stund är det bara de senaste versionerna av Google Chrome och Firefox som har stöd för AVIF.

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 och i skrivande stund är det bara Safari som inte har stöd för WebP, men även Safari kommer att stödja filformatet under 2020.

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.

Kan jag använda AVIF eller WebP?

Varken AVIF eller WebP är ännu standardfilformat, även om WebP är nära att bli en ny branschstandard. Än så länge måste du ladda upp samma bild i flera filformat för att säkerställa stöd i alla webbläsare och dessutom kommer webbservrar behöva arbeta hårdare för att avkoda bilderna.

Jag använder WordPress en hel del och än så länge måste man konvertera JPEG-bilder till WebP med hjälp av tillägg som också känner av vilken webbläsare som besökaren har och presenterar WebP för den som använder en webbläsare med stöd och JPEG för den som saknar stöd för WebP.

När de här filformaten når nivån som branschstandard (om de gör det) kommer Photoshop att erbjuda AVIF och WebP som alternativ när man exporterar för webb och skärmar. Än så länge verkar det inte vara något som är på gång, men vi kan nog förvänta oss att Adobe kommer att introducera åtminstone något av de två formaten inom några år.