Next-gen formaten att hålla koll på för effektivare bildoptimering

Det var länge sedan de första bildformaten kom ut som vi alla är så vana vid och använder dagligen, det vill säga format som JPEG, PNG och GIF. Men tekniken går ständigt framåt och under det senaste året har det börjat hända en hel del nytt även här.

Det har nämligen kommit flera stycken nya så kallade next-gen format som erbjuder bättre och effektivare komprimering för bilder. Något som i sin tur leder till att man inte behöver ladda ner lika mycket data och är ett steg i rätt riktning för en snabbare webbplats.

Den senare tiden har man märkt att allt fler verktyg som används för att bedöma en webbplats laddningstid, som exempelvis PageSpeed Insights har börjat rekommendera att byta över till de nya moderna bildformaten. Så om du inte redan har koll på de nya formaten är detta inlägget för dig!

Vad för skillnad gör bildformaten egentligen?

Om man arbetar med sökmotoroptimering har man många gånger hört att webbplatsens laddtid är otroligt viktig. Det är nämligen en av rankingfaktorerna som avgör hur väl din webbplats presterar i det organiska sökresultatet och går hand i hand med hur besökarna upplever din sajt.

Och en av de största bovarna när det kommer till en långsam webbplats är just bilder, så genom att använda rätt bildformat och komprimera dessa korrekt finns det sekunder att spara. Det är något som de nya formaten kan hjälpa till med!

WEBP – Googles egna bildformat

WebP är ett bildformat som Google utvecklar med riktigt bra komprimeringsmöjligheter. De lovar 25-35% mindre bildfiler än JPEG och 26% mindre än PNG. Här finns dessutom både stöd för komprimering, transparenta bakgrunder och för animering. Därför kan det ses som ett bra alternativ till både JPEG, PNG och GIF.

Google har testat att byta över till WebP på några av sina egna produkter som exempelvis Google Play som minskade sina bildstorlekar med 35%. YouTube testade även att byta över till WebP på alla sina thumbnails och såg en minskning på hela 10% vad gäller sidans laddningstid. Inte illa!

Läs mer om WebP!

JPEG 2000 – Skapat av grundarna bakom JPEG

JPEG 2000 är framtaget av Joint Photographic Experts Group, det vill säga grundarna av JPEG som nu utvecklar en ny version med målet att detta format i framtiden ska ersätta JPEG. Till skillnad från JPEG använder JPEG 2000 en annan sorts komprimering som kommer tillåta både snyggare och bättre komprimeringsmöjligheter.

Läs mer om JPEG 2000!

JPEG XR

JPEG XR är skapat av Microsoft som lovar bättre komprimeringsmöjligheter och stöd för transparenta bakgrunder.

Läs mer om JPEG XR!

APNG 

APNG står för Animated Portable Network Graphics som Mozilla står bakom och utvecklar. Det kan ses som en uppgradering av det äldre bildformatet PNG med tillägget att det nu tillåter animering.

Läs mer om APNG!

Finns det några nackdelar med de nya formaten?

En nackdel med att använda vissa av de nya bildformaten idag är att alla webbläsare inte stödjer dem. Än så länge. Flertalet webbläsare både testar och har planer om att implementera stöd för det i framtiden men alla är helt enkelt inte riktigt där ännu.

I takt med att de nya bildformaten blir allt populärare och fler och fler verktyg som Page Speed Insights börjar rekommendera det är det mycket av en tidsfråga innan det slår igenom. Därför kan det vara bra att redan nu ha en plan för hur detta kan gå till rent tekniskt. Kolla möjligheterna i god tid!

Vilka webbläsare stödjer de nya bildformaten?

Nedan kan vi se en lista på vilka bildformat som stöds på de olika webbläsarna:

nextgen bildformat webbläsare

Som det ser ut just nu är det Googles egna bildformat, WebP som stödjs på flest webbläsare (bortsett från Safari och IE) men detta kan så klart ändras i framtiden. Om du vill fortsätta hålla koll och se vilka webbläsare som stödjer de olika formaten kan du besöka caniuse.com.

💡 Lästips

Vill du läsa mer om bildoptimering? Då kan du passa på att läsa mina tidigare artiklar:

Bildformat för webben och sökmotorerna

Alla älskar vi bilder! De ska vara högupplösta, av god kvalité och samtidigt få webbplatsen att ladda på nolltid. Det är tre saker som sällan går hand i hand utan man brukar få kompromissa mellan kvalité och sidhastighet. Men behöver det vara så? Går det att få schyssta bilder utan att de blir onödigt tunga och segar ner webbplatsen? Det korta svaret är ja!

Bara genom att välja rätt format på bilderna går det att se en märkbar skillnad, och om vi dessutom komprimerar dessa går det att få riktigt bra resultat med fina bilder som inte behöver kosta mer än vad det smakar.

För dig som är ny inom bildoptimering eller bara vill färska upp minnet kan du läsa min artikel ”Så optimerar du dina bilder för söket” där jag går igenom bildoptimeringens grunder medan vi idag kommer djupdyka bland de vanligaste bildformaten som finns. Trevlig läsning! 🌸

Hur hänger detta ihop med sökmotoroptimering?

Det finns nog inget som kan tynga ner en webbplats så mycket som stora och högupplösta bilder gör. Hur snabbt en webbplats laddar är en viktig faktor både när det kommer till det betalda och organiska söket där en långsam webbplats kan leda till försämrad synlighet och sämre quality score. Dessutom så skapar det en negativ användarupplevelse för besökarna – för vem gillar att vänta egentligen?

Detta betyder inte att man måste hålla sig borta från fina bilder men att man ska tänka på att göra det på ett korrekt sätt, och bara genom att spara ned bilderna i rätt filformat finns det sekunder att spara!

Bildformaten vi är vana vid

Det är lätt att bli förvirrad när man tänker på alla möjliga bildformat som finns – JPEG, PNG, SVG eller GIF – vad betyder de egentligen? Vad ska man använda och när? Det är stor skillnad mellan filformaten och det är viktigt att välja rätt, inte bara för söket i sig men för att bilderna ska se så bra ut som möjligt.

JPEG – Det mest använda bildformatet på webben

JPEG står för Joint Photographic Experts Group vilket är namnet på utvecklingsteamet bakom det kanske mest använda bildformatet när det kommer till webben. Detta filformat passar perfekt för webbplatser och bloggar med mycket fotografier på grund av de bra komprimeringsmöjligheterna som kan få bilderna att bli väldigt små storleksmässigt. Ett go-to filformat för bilder webben helt enkelt!

Tänk på att bilderna kan förlora kvalité om de komprimeras för mycket, så man får hitta en bra balans som ser bra ut för ögat och som inte slöar ner webbplatsen för mycket.

PNG – För dig som vill ha transparenta bilder

PNG står för Portable Network Graphics och används oftast på grafer, ikoner, illustrationer eller andra bilder där transparent bakgrund är viktig. Till skillnad från JPEG så komprimeras inte bilderna på samma sätt så kvalitén förstörs inte, vilket leder till större filstorlekar men med bättre kvalité. Om du behöver bilder med en transparent eller genomskinlig bakgrund är detta bildformatet för dig!

Med andra ord kan det vara en dålig idé att spara högupplösta fotografier i PNG vid uppladdning på webbplatsen. Detta är för att storleken på filen lätt drar iväg och kommer påverka laddtiden.

GIF – Animerade och rörliga bilder på nolltid

GIF står för Graphics Interchange Format och är mest känt för möjligheten att skapa animerade bilder på webben utan att använda video. Ni har garanterat sett dem på sociala medier tidigare! Om du vill ha animerade bilder finns det egentligen inget bättre alternativ än GIF.

Viktigt att tänka på är så klart att inte göra filerna allt för stora, för då kommer det dra ner på webbplatsens laddtid. Är det mycket innehåll, kör på video istället (som dessutom kan optimeras).

SVG – Perfekt för enklare loggor, ikoner & vektorgrafik

SVG står för Scalable Vector Graphics och fungerar något annorlunda än de andra bildformaten eftersom det egentligen är ett dokumentformat likt HTML eller CSS, där filen består av en kod som berättar hur bilden ska se ut. Som namnet avslöjar är bilderna helt skalbara och kommer att hålla samma goda kvalité oavsett upplösning på skärm eller enhet.

Passar perfekt för olika typer av enklare ikoner, symboler och loggor då filerna inte blir alltför stora och håller god kvalité.

Hur vet jag vilket bildformat som används?

Det kan man enkelt ta reda på genom att titta på bildens filändelse. Du kan säkert ha sett i URLen när du öppnar en bild i en ny flik eller när du laddar ner en bild att det slutar med .png, .gif eller .jpg. Det visar vilket format som bilden är sparad i! Du kan så klart även ladda ner bilden och välja ”inställningar” som på bilden nedan.

Vilket bildformat passar mig och min webbplats?

I ett SEO-perspektiv spelar det egentligen ingen större roll vilket format du väljer att använda, så länge det inte påverkar webbplatsens laddtid negativt. Bilderna i sig kommer kunna indexeras i sökresultatet oavsett om du väljer JPEG, PNG eller GIF – bara de blir optimerade för söket.

Tänk istället på att välja format baserat på vilken funktionalitet du behöver, komprimera bilderna och ladda inte upp dem i större upplösning än vad de behöver vara. Det kommer man långt på!

Nya bildformat på väg

Du kanske har hört talas om att det finns nya, så kallade next gen bildformat på ingång som kan komprimera bilder både effektivare och bättre? Ett av de nya bildformaten heter WebP och kan ses som ett effektivare alternativ till JPEG, PNG och GIF. Du kan läsa mer om de olika formaten i min artikel ”Next-gen formaten att hålla koll på för effektivare optimering”.

💡 Lästips

Intresserad av bildoptimering och vill läsa mer? Missa då inte mina andra inlägg: