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: 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.

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.

Webbläsarstöd för bildformat
 CromeFirefoxEdgeSafariOpera
WebP Ja       Ja
JPEG XR     Ja    
JPEG 2000       Ja  
APNG Ja Ja   Ja Ja

Jämförelse av egenskaper

I tabellen kan du se vilka egenskaper respektive format har.

Egenskaper för bildformat
 WebPJPEG XRJPEG 2000APNG
Oförstörande komprimering Ja Ja Ja Ja
Förstörande komprimering Ja Ja Ja  
Transparens Ja Ja   Ja
Progressiv rendering   Ja Ja  
Animering Ja     Ja

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

Bild av ett landskap med berg, skog och sjö

Oförstörande komprimering

Filstorlek för bildformat foto i färg oförstörande komprimering
FiltypFilstorlek
WebP 319,79 KB
JPEG XR 320,53 KB
JPEG 2000 407,88 KB
PNG 419,59 KB

Förstörande komprimering

Filstorlek för bildformat foto i färg förstörande komprimering
FiltypFilstorlek
WebP 36,38 KB
JPEG XR 54,24 KB
JPEG 62,30 KB
JPEG 2000 84,68 KB

Bild två: foto i svart-vitt

Bild av en droppe som träffar vatten

Oförstörande komprimering

Filstorlek för bildformat foto i svart-vitt oförstörande komprimering
FiltypFilstorlek
WebP 87,04 KB
PNG 158,56 KB
JPEG XR 178,57 KB
JPEG 2000 245,82 KB

Förstörande komprimering

Filstorlek för bildformat foto i svart-vitt förstörande komprimering
FiltypFilstorlek
JPEG XR 15,06 KB
WebP 15,84 KB
JPEG 22,00 KB
JPEG 2000 47,01 KB

Bild tre: logotyp

Metamatrix logotyp

Oförstörande komprimering

Filstorlek för logotypbild oförstörande komprimering
FiltypFilstorlek
WebP 3,25 KB
PNG 6,14 KB
JPEG XR 17,13 KB
JPEG 2000 23,35 KB

Förstörande komprimering

Filstorlek för logotypbild förstörande komprimering
FiltypFilstorlek
WebP 3,08 KB
JPEG XR 7,32 KB
JPEG 2000 7,71 KB
JPEG 7,82 KB

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/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-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 webbläsaren Chrome, som i dagsläget är den överlägset mest använda webbläsaren, och snart även stöd i Edge anser jag att det är värt att använda WebP-bilder på webbsidor.