Du är här: Hem > Artiklar >

Bildoptimering. Vad är det och varför är det viktigt?

Publicerad:

En webbplats utan bilder är en tråkig webbplats, men en webbplats som ingen besöker för att den tar för lång tid att ladda är nog ännu tråkigare. Som tur är så behöver du inte välja – bildoptimering är lösningen! Här kommer en snabbguide till bildoptimering, olika filformat och allmänna tips för bildhantering på webben.

Erik Morlin. Foto.

En webbplats laddningstider och prestanda är viktigt. Ni har säkert sett siffrorna från förut. Enligt Google så lämnar 53% av användare en webbplats som tar längre tid än 3 sekunder att ladda. En av anledningarna till att en webbplats laddar långsamt kan vara att webbplatsens bilder är dåligt anpassade, eller dåligt optimerade för webben.

På HTTP Archive kan man se att i genomsnitt 69% av det vad man brukar kalla en webbplats vikt (den data som laddas ner från servern till klienten) utgjordes av bilder. Om större delen av webbplatsens data som skickas mellan server och besökaren består av bilder är det lätt att förstå vikten av att dessa bilder är så små som möjligt. Vi pratar om att optimera bilderna.

Vad är bildoptimering?

Att optimera bilder handlar om att, från servern till klienten, leverera en bild med så hög bildkvalitet som möjligt i rätt filformat och med rätt dimensioner och upplösning, samtidigt som man komprimerar bilden för att hålla filstorleken så liten som möjligt.

På Winston arbetar vi i första hand med två olika CMS. Episerver från Microsoft samt open source-alternativet Umbraco. I båda dessa system kan man, om det är implementerat, få hjälp med bilddimensioner och komprimering av bilder. Om det stödet inte finns får man själv manuellt omförsörja att bilder optimeras på bästa sätt. Att välja rätt filformat bör man alltid tänka på, även om man får hjälp av dimensioner och komprimering av sitt CMS, då detta styrs av bildens motiv.

Att välja filformat

Det första man bör tänka på är vilket filformat bilden ska ha. Det finns stöd för många olika filformat för bilder på webben. I dagsläget är det framförallt fyra olika format som är aktuella att använda sig av. (Eller egentligen fem om man räknar med Googles nya filformat webP. Mer om det sen.) Dessa är PNG, JPG, GIF, and SVG. Alla dessa filformat har sina styrkor och svagheter. För att få så väl optimerade bilder som möjligt gäller det att välja rätt filformat för rätt bildtyp eller motiv. Nedan följer att antal regler som i de allra flesta fall blir rätt.

För foton använd JPG/JPEG

JPG är det absolut vanligaste bildformatet för fotografier på Internet. Det enda som skiljer JPEG och JPG åt är antalet bokstäver i filändelsen som beror på att tidigare versioner av Windows krävde filändelser med tre bokstäver. JPG är alltså förkortningen av JPEG så du kan byta filnamn fram och tillbaka utan att själva filen påverkas. JPG är ett filformat som är bra på att komprimera bilder – men dock på bekostnad av att viss information från bilden försvinner. Filformatet använder sig av en så kallad förstörande komprimering. Dock så är detta något som oftast inte märks i ett fotografi om man inte överdriver komprimeringen.

Exempelbild (png) på en glass med strössel

PNG 440x487px, 297 KB

Exempelbild (jpeg) på en glass med strössel

JPG 440x487px, 89 KB

Som man ser av exempelbilderna så är det ingen större skillnad i kvalitet mellan fotografiet i PNG och JPG, däremot väger PNG betydligt mer än JPG vilket gör JPG till ett bättre val.

För illustrationer och bilder med text - använd PNG

PNG lämpar sig bäst för illustrationer och bilder med text i. Till skillnad från JPG använder sig PNG-formatet av en icke-förstörande komprimering vilket medför att ingen information i bilden går förlorad.

Exempelbild (png) på en illustration av ett formulär mot rosa bakgrund

PNG 414x414px, 73KB

Exempelbild (jpeg) på en illustration av ett formulär mot rosa bakgrund

JPG 414x414px, 18KB

Kvalitetsförlusten i JPG-bilden är så pass betydande att PNG är det bästa valet för illustrationen, fastän PNG väger mer.

GIF för små bilder med få färger

GIF är ett filformat som lämpar sig bäst för små bilder med få färger - till exempel logotyper och ikoner. GIF har stöd för begränsat antal färger vilket gör att det absolut inte ska användas till fotografier.

Exempelbild (gif) av en svensk flagga

GIF 243x152, 1kb

Exempelbild (jpg) av en svensk flagga

JPG 243x152, 10kb

Här väger ingen av bilderna speciellt mycket men procentuellt är GIF:en mycket lättare.

SVG för vektorgrafik

SVG är ett vektorformat. Detta innebär att en SVG-fil kan skalas upp till i princip vilken storlek man vill utan att bildens kvalitet förändras. Även SVG lämpar sig bra för logotyper och ikoner och dåligt för fotografier. Har man tillgång till en SVG-fil är det oftast ett bättre alternativ än GIF-bilder.

Exempelbild (svg) av Winstons logotyp

SVG, 2kb

Exempelbild (gif) av Winstons logotyp

GIF 440x340, 8kb

SVG-filen är lättare samtidigt som den håller högre kvalitet och är därför det bästa valet här.

Vad är rätt dimension?

Med dimension avses hur stor bilden är i antal pixlar. Det är inte alltid lätt att avgöra vad som är rätt bilddimension. I anslutning till den redaktionella ytan där bilden ska användas (eller i manualen som levererades med webbplatsen) bör det stå angivet vilka mått det är som gäller. Om så ej är fallet och man inte har tid med att fråga sin webbyrå så får man lita till sitt sunda förnuft. Lite förenklat kan man säga att bilden man vill ladda upp och använda inte ska vara bredare än den yta den ska ligga i på webbplatsen.

Hur vet man då vilka dimensioner en bild har?

Om det är en bild du har på din hårddisk är det enklaste sättet att ta reda på dimensionerna att högerklicka på filen och välja Visa info/Get info i macOS eller Egenskaper/Properties på Windows.

Hur sparar man en bild i rätt dimension?

Konstaterar man att bilden är för stor för ändamålet så får man använda sig av ett verktyg för att spara om bilden i rätt dimensioner. Det finns många program att använda sig av. I Mac OS finns inbyggt stöd för att ändra storlek på bilder. Här kan man läsa mer om hur man gör i Mac OS. I Windows finns inget inbyggt stöd. Då får man använda sig av något tredjepartsverktyg. Det kanske vanligaste verktyget att använda sig av är Adobes Photoshop. Har man inte tillgång till det så finns det säkert någon kollega som har. Eller så kan man alltid fråga sin webbyrå om hjälp. Fördelen med Adobe Photoshop är att man även kan få hjälp med att komprimera sina bilder.

Komprimering av bilder

Att komprimera en bild betyder mycket förenklat att man plockar bort information eller data från bilden som inte behövs för att bilden ska visas korrekt i webbläsaren. För bilder finns två typer av komprimering. Förstörande (för JPG) och icke förstörande (för SVG, PNG och GIF).

Det är den förstörande komprimeringen som gör att bilder i JPG-formatet kan upplevas som pixliga. Det gäller alltså att inte komprimera bilder i JPG-formatet för hårt.

Det finns många verktyg att använda sig av för att komprimera bilder. Använder man sig av Adobes Photoshop för att spara sina bilder i rätt dimensioner kan man samtidigt passa på att komprimera sin bild. Ett annat mycket bra och populärt verktyg som finns gratis att ladda ner till MacOS och som som online-verktyg mot betalning är verktyget ImageOptim. Det finns dessutom gott om andra verktyg att använda sig av om man letar lite på Internet.

Exempelbild på en glass med strössel

Okomprimerad JPG 440x485, 176KB

Exempelbild på en glass med strössel

Komprimerad JPG 440x485, 72KB

Exempelbild (png) på en illustration av ett formulär mot rosa bakgrund

Okomprimerad PNG 414x414px, 73KB

Exempelbild (png) på en illustration av ett formulär mot rosa bakgrund

Komprimerad PNG 414x414px, 64KB

 

WebP och framtiden

På senare tid har Googles nya filformat WebP fått ett så pass stort stöd i webbläsare så att det börjar bli ett alternativ i nya webbprojekt. WebP är ett filformat som möjliggör hög komprimering utan att man tappar bildkvalitet. Dock så saknas fortfarande stöd i Safari och iOS-safari. Detta medför att i Sverige kommer ca 50% av användarna inte se dessa bilder. Det går att koda så att dessa webbläsare får se alternativa bilder i andra filformat, det tar dock mer tid och är lite krångligt.

JPG 440x487px, 89 KB

WebP 440x487px, 26 KB

PNG 414x414px 73KB

WebP 414x414px 13KB

Ser du inte WebP bilderna här ovan beror det alltså på att din webbläsare inte har stöd för det formatet. Om du ser bilderna så kan du förhoppningsvis se att fastän filerna är mycket lättare så är kvaliteten är bibehållen.

Sammanfattning

Att optimera bilder för webben är viktigt för att få så snabba laddningstider som möjligt. Optimera bilder gör man genom att:

  • Välja rätt filformat
  • Spara bilden i rätt dimensioner
  • Komprimera bilden