Jämförelse av nya bildformat för webben

När det här inlägget skrivs visar Httparchives statistik att medianvärdet för storleken på en webbsida är 1 545 KB, varav bilder står för 657 KB. Det innebär att bilder står för ungefär 42,5 procent av det data som användare laddar ner när de besöker en webbsida. Trots det har det stått rätt still på området bildformat i många år. JPEG och GIF har hängt med ända sedan nittiotalet och de nyare formaten som transparanta PNG och SVG har haft bra stöd i webbläsare de senaste fem till tio åren.

Nu finns det några nya moderna bildformat att använda sig av: AVIF, WebP, JPEG XR, JPEG 2000 och APNG. Den största anledningen till att börja använda de nya formaten är bättre komprimering vilket leder till mindre filstorlek för bilderna. I sin tur leder detta till att användarna laddar ner mindre data när de besöker webbsidor och sidan laddar då snabbare. Det är framför allt viktigt för mobila enheter och även positivt för sökmotoroptimeringen.

Förstörande eller oförstörande komprimering

Förstörande komprimering innebär att när en fil komprimeras påverkas informationen i filen så att den inte går att återställa till originalet. Format som JPEG och GIF använder förstörande komprimering vilket gör att bilders motiv "förstörs" när de sparas i dessa format. Genom att använda förstörande komprimering kan bilders storlek minskas något utan att det mänskliga ögat ser någon skillnad på bildens motiv. Men komprimeras bilden för mycket kommer motivet se fult ut. PNG har varit det enda formatet som kan spara bilder med oförstörande komprimering för webben men leder ofta till stora filstorlekar.

AVIF

AV1 Image File Format (AVIF) är open-source och utvecklat av Alliance For Open Media. Det är en stillbildsversion av videoformatet AV1 och har stöd för både förstörande och icke förstörande komprimering. AVIF ska kunna ha uppemot 50% mindre filstorlek än JPEG-bilder.

WebP

WebP är skapat av Google och ska ge 26% mindre filstorlek jämfört med PNG och 25-34% mindre filstorlek än JPEG. WebP använder förutsägande komprimering som använder värdena i närliggande block av pixlar för att förutsäga värdena i ett block och kodar endast skillnaden. WebP har stöd för både förstörande och oförstörande komprimering, animering och transparens.

JPEG XR

JPEG extended range är skapat av Microsoft. Det är en förbättring av JPEG-formatet med bland annat bättre komprimering, oförstörande komprimering och stöd för transparens.

JPEG 2000

JPEG 2000 är skapat av Joint Photographic Experts Group med syftet att ersätta JPEG. Till skillnad från JPEG använder JPEG 2000 vågbaserad komprimering vilket ska tillåta bättre och snyggare komprimering. JPEG 2000 har också stöd för oförstörande komprimering.

APNG

APNG (Animated Portable Network Graphics) är skapat av Mozilla och använder samma komprimering som PNG men kan animeras.

Webbläsarstöd

I tabellen kan du se vilka webbläsare som har stöd för vilket format. För mer detaljerad statistik kan du besöka Can I use.

Jämförelse av egenskaper

I tabellen kan du se vilka egenskaper respektive format har.

Jämförelse av filstorlek

Eftersom de olika formatens komprimeringsmetoder skiljer sig åt är det svårt att göra en helt rättvis jämförelse. Beroende på bildens motiv kan vissa format lämpa sig bättre än andra. Därför har jag har jämfört tre olika bilder: ett fotografi i färg, ett fotografi i svart-vitt och en logotyp. Jag har komprimerat bilderna i varje format så mycket som möjligt utan att jag med ögat kan se några större tydliga försämringar i bildens motiv. Jag har också valt att ta med gamla goda JPEG och PNG för jämförelsens skull. Jag har jämfört samtliga bilder i förstörande och oförstörande komprimering. APNG har jag inte tagit med då den använder samma komprimeringsmetod som PNG.

För att generera bilderna i testerna har jag använt XnView MP. Efter att testat ImageMagic samt en rad olika plugins till Photoshop och Gimp som inte fungerade var XnView MP det enda program som på ett enkelt sätt kunde hantera alla formaten.

Bild ett: foto i färg

Oförstörande komprimering

Förstörande komprimering

Bild två: foto i svart-vitt

Oförstörande komprimering

Förstörande komprimering

Bild tre: logotyp

Oförstörande komprimering

Förstörande komprimering

Nya format - bättre komprimering

En av fördelarna med de nya formaten är att de ska ha bättre komprimering. Det innebär att bilder ska kunna komprimeras mer med ett bättre resultat så att bildens motiv inte förstörs. För att testa detta har jag sparat en bild som JPG, AVIF och WebP med en ungefärlig storlek på 50 kb. Denna bild visar tydligt att AVIF och WebP ger ett mycket bättre resultat än JPEG vid hög komprimering.

Picture elementet

För att använda de nya moderna bildformaten på en webbsida kan du använda HTMLs picture-element. Genom att ange flera olika bildkällor kan webbläsaren själv avgöra vilken av bilderna som ska visas. Gamla webbläsare som inte har stöd för formaten eller picture-elementet använder sig av det vanliga img-elementet där du kan ange en bild i ett format som har stöd i alla webbläsare. Så här skulle det kunna se ut i HTML-kod.

<picture>
  <source type="image/avif" srcset="landskap.avif">
  <source type="image/webp" srcset="landskap.webp">
  <source type="image/jp2" srcset="landskap.jp2">
  <source type="image/vnd.ms-photo" srcset="landskap.jxr">
  <img src="landskap.jpg" alt="">
</picture>

WebP vinnande formatet

Testerna visar att det är krångligt att komprimera JPEG 2000-filer så pass mycket att det ger någon nytta. JPEG XR ger bra resultat ibland men i andra fall ger både PNG och JPEG bättre eller snarlikt resultat. Det går nog att optimera komprimeringsparametrarna för bättre resultat men det finns idag, vad jag kunde hitta, inga verktyg för att enkelt göra detta. I mina tester fick bilderna i WebP- och AVIF-format nästan alltid minst storlek utan någon vidare ansträngning. Det finns dessutom gott om verktyg för att spara WebP-bilder. Eftersom WebP har stöd i alla moderna webbläsare idag anser jag att det är värt att använda WebP-bilder på webbsidor. AVIF kan ge bättre resultat än WebP men har i dagsläget inte stöd i alla webbläsare.