Vad är WebP?

WebP är ett stillbildsformat som stödjer både destruktiv och förlustfri komprimering, och som utvecklas av Google. WebP ger ungefär 35% mindre filstorlek jämfört med JPEG, men behåller samma kvalitet.

Bildformatet WebP har funnits sedan 2010, men det är först på senare tid som formatet börjat användas. WebP stöder både transparens, animering och metadata. Det låter ju perfekt - varför används det inte redan överallt? Vi ska försöka förklara.

När ska man använda WebP?

Vi tycker ju att WebP ska användas framöver eftersom vi gillar både prestanda och kvalitet.

WebP är bra att använda för webbsajter där prestanda och hastighet är viktigt eller som har många och/eller stora bilder. Det hör förstås ofta ihop. Formatet WebP föredras också av Google, och kan alltså påverka SEO och rankningen för en webbsajt.

Om det handlar om väldigt många och stora bildfiler finns också fördelen att man behöver mindre plats på servern (det förutsätter förstås att filerna laddas upp i WebP format från början).

Exempelvis Youtube använder WebP till sina bilder när det är möjligt.

Vilka webbläsare stöder WebP?

De flesta moderna webbläsare och WordPress från version 5.8+ har stöd för WebP. Stöd för WebP finns inbyggt i webbläsarna Chrome, Safari, Firefox, Edge, Opera och stöds av många andra verktyg och programbibliotek. 

Problembarnen är Internet Explorer som saknar WebP stöd, och Safari på äldre macOS-versioner som bara delvis har stöd för WebP bilder. Men användare med de versionerna krymper allt mer, och det är något man behöver tänka på endast om man vet att ens målgrupp har äldre versioner och att man specifikt måste ta hänsyn till dem. (Supporten för IE försvann juni 2022 så nu försvinner den väl snart helt hoppas vi.)

Varför använder inte alla redan WebP?

JPG/JPEG är standardformatet för bildfiler i de flesta kameror, smartphones och bildbibliotek online. Inte alla bildvisnings-  och  bildredigeringsprogram och verktyg har haft (eller har) stöd för formatet vilket förstås varit besvärligt. Dock har Photoshop sedan version 23.2 fullständigt stöd för WebP - utan plugin-program eller inställningar. 

Det är alltså inte lika enkelt att generera (eller redigera eller ens titta på) WebP-bilder som en bild i formaten JPG, PNG eller GIF. Alla CMS har heller inte automatisk bildkonvertering till WebP-format (än), men t ex för WordPress finns plugin att använda - och vi webbutvecklare kan i kod se till att uppladdade bilder i andra format kan konverteras om till WebP innan de visas ut.

Det har också tidigare varit problem med WebP bilder i olika kanaler som exempelvis Linkedin som bearbetar om delningsbilder och inte haft stöd för just WebP-formatet.

Motsvarande format för video heter WebM, men det kan vi skriva en annan artikel om en annan dag.

Olika vanliga bildformat

Vi bjuder på en liten sammanställning av de vanligaste bildformaten för webben och skillnaderna mellan dem.

JPEG/JPG

Detta är det absolut vanligaste bildformatet tack vare sin kombination av bildkvalitet och filstorlek och är ett komprimerande bildformat. Det innebär att varje gång en bild sparas i JPEG så sker en komprimering som medför en kvalitetsförlust. Formatet stöder miljontals färger men INTE transparens (genomskinlighet). JPEG brukar användas för foton med många färger som behöver ha så liten storlek som möjligt.

PNG

PNG formatet innebär ofta högre kvalitet, men också en större filstorlek. Här finns två olika varianter -  PNG 24 och PNG 8. PNG 24 kan visa miljontals färger medan PNG 8 endast kan visa 256 färger. Båda varianterna stöder transparens.

PNG 24 har också egenskapen att den inte är förstörande eller komprimerande. Det innebär att man kan spara om en PNG 24 bild hur många gånger som helst utan att kvaliteten påverkas. 

PNG är ganska bra på att hantera fotografier, men formatet används främst till webbgrafik, logotyper, diagram och illustrationer eftersom filerna är större än JPEG-filer (och alltså tar större lagringsutrymme och tar längre tid att ladda in).

GIF 

GIF bilder använder bara 256 färger och använder bara felfri kompression. Även om GIF bilder stöder transparens, hanterar de inte semi-opacitet, vilket blir helt konstigt om bilden till exempel innehåller gradienter (skuggor i olika grader). Begränsningen till 256 färger gör att formatet inte lämpar sig för fotografier, men enklare logotyper eller bilder med få färger går utmärkt.

Det som har gjort GIF-formatet så populärt är dess stöd för animationer, men idag används ofta videoformaten .mp4 och .webm till animationer istället eftersom den där begränsningen med 256 färger är just en begränsning.

SVG

Detta är egentligen inte ett bildformat utan ett dokumentformat precis som HTML eller CSS och en SVG-fil består av kod som talar om hur en bild ska se ut. SVG bygger på vektorgrafik och kan skalas upp och ner med bibehållen kvalitet och ser också alltid ser bra ut oavsett skärmupplösning. Det passar dock bäst för exempelvis logotyper och grafik utan alltför många detaljer så att filstorleken kan hållas nere.

WebP formatet ger ju det bästa av formaten ovan - låg filstorlek och stöd för både transparens och animation.