Hur du optimerar bilder för webben

Många webbplatser är onödigt tunga, och en av de största bovarna är bilderna. Det är vanligt att 60-80% av storleken på en webbsida består av bilder. Genom att optimera bilderna kan du få sidan att ladda snabbare, och på så vis komma ett steg närmare alla fördelar en snabb webbplats ger.

I den här artikeln kommer jag berätta mer om de olika filformaten som används för bilder på webben och ge dig tips för hur du optimerar dina bilder på bästa sätt.

Bildbehandlingsprogram

Har du ett bildbehandlingsprogram du är nöjd med, som Photoshop till exempel? Toppen, då kan du fortsätta till nästa rubrik.

Om du inte har ett bildbehandlingsprogram kan jag rekommendera Paint.NET, som både är gratis och har många funktioner.

Välja rätt filformat

Det finns tre filformat som används flitigt på webben, och ett filformat som börjar bli vanligare av en god anledning.

JPEG

JPEG (som har filändelsen .jpg och därför felaktigt kallas för JPG ibland) ska användas för fotografier och verklighetstrogen datorgrafik. Dessa bilder innehÃ¥ller extremt mÃ¥nga färger, vilka komprimeras väldigt effektivt när de är sparade i JPEG (mer om komprimering senare i artikeln).

Skulle exempelvis en logotyp sparas som JPEG skulle den bli i sämre kvalitet samtidigt som filstorleken skulle bli mycket större.

PNG

Detta filformat lämpar sig bäst för illustrationer, alltså i princip allt som inte är fotografier, exempelvis logotyper, ikoner, diagram och annan enkel grafik. Dessa illustrationer har mycket färre och renare färger, och blir i mycket bättre kvalitet som PNG-bild samtidigt som filstorleken blir mindre.

Skulle ett fotografi sparas som PNG skulle ingen märkbar skillnad ske utseendemässigt, men filstorleken skulle antagligen bli runt fem gånger större, vilket gör att den tar betydligt längre tid att ladda in på en webbplats.

GIF

Illustrationer sparades ofta i GIF-format förr, innan det nyare PNG-formatet kom. En GIF-bild kan endast ha 256 färger, vilket gör att den duger fint för enkel grafik, men har man många runda former och färgskiftningar lämpar sig PNG bättre. Sanningen är att PNG nästan alltid lämpar sig bättre än GIF, i och med att man kan göra mer med en PNG samtidigt som filstorlekarna inte skiljer sig så mycket åt.

GIF-bilder kan för övrigt vara animerade, vilket är något som de andra bilderna inte kan vara.

Skulle ett fotografi eller detaljerad illustration sparas som GIF skulle färgerna och formerna på bilden bli kantiga och pixliga.

SVG

Filformatet SVG är så kallad vektorgrafik, och är fortfarande ganska nytt på webben ? ca 10% av världens befolkning har för gamla webbläsare för att kunna se bilderna. Medan JPEG, PNG och GIF (så kallad rastergrafik) består av fasta pixlar, så består vektorgrafik av enkla former och linjer som tillsammans beskriver en bild. Den stora fördelen med vektorgrafik är att man kan skala om den hur mycket man vill, och den kommer ändå alltid vara knivskarp.

Ett vanligt problem hos rastergrafik är att de kan bli suddiga på retinaskärmar. Detta problem har förstås inte vektorgrafik.

SVG fungerar bäst för enkla illustrationer (logotyper, ikoner, diagram), vilket gör att filformatet kanske ersätter PNG en dag. Filstorleken blir oftast mindre, men har bilderna väldigt många detaljer är PNG att föredra. I skrivande stund är det hur som helst för tidigt för att övergå helt till SVG.

Komprimering

Filformaten JPEG och PNG kan komprimeras (eller rättare sagt optimeras), och på så vis levereras snabbare till webbläsaren.

JPEG

När du sparar JPEG-bilder i ditt bildbehandlingsprogram kan du välja hur bra kvalitet du vill att bilden ska ha. Många tänker att de vill ha den bästa kvaliteten och väljer därför 100%, men sanningen är att du oftast kan välja så låg kvalitet som 80% utan att man ser någon skillnad ? ibland ännu lägre. Och sämre kvalitet leder i det här fallet till en mindre filstorlek.

Bilderna ovan är i kvaliteterna 100% respektive 80%. Ser du någon skillnad på dem? Inte jag heller. Skillnaden ligger dock i filstorleken ? medan vänstra bilden är 78,4 kB är den högra endast 17,4 kB. När vi minskade kvaliteten till 80% fick vi med andra ord endast 22% av filstorleken.

Är siffrorna svåra att greppa kan vi säga så här istället: Sitter en besökare med en dålig 3G-uppkoppling och laddar in den vänstra bilden på 1 sekund, så laddar besökaren in den högra bilden på 0,22 sekunder.

PNG

En PNG-bild kan sparas i tre olika varianter ? 8, 24 och 32-bitar. Ju lägre bitar desto mindre filstorlek, och ju högre bitar desto bättre kvalitet.

8-bitars PNG fungerar i princip likadant som en GIF-bild, alltså kan bilden endast ha 256 färger. Både 24- och 32-bitars kan ha flera miljoner färger. Det som skiljer dem två åt är att 32-bitars kan ha semitransparenta färger, alltså färger som är lite genomskinliga.

Det enklaste är att du provar dig fram till vilken variant som passar bäst för din bild. I vissa bildbehandlingsprogram kan man låta programmet bestämma hur många bitar PNG-bilden ska sparas i, då väljer den så låg som möjligt utan att kvaliteten påverkas.

Spara bilden i rätt storlek

Ett misstag som jag ofta ser andra göra är att de lägger till en bild i full storlek och sedan förminskar den i HTML-koden. Detta betyder naturligtvis att webbläsaren måste ladda ner hela den stora bilden, vilket är extremt onödigt. Ta istället reda på vilken storlek du kommer använda och förminska bilden i ditt bildbehandlingsprogram innan du lägger till du på webbplatsen.

Använder du WordPress och ett välgjort tema behöver du inte tänka på detta eftersom bilderna då förminskas till rätt storlek automatiskt. Är ditt WordPress-tema dåligt gjort kan du dock behöva ändra storleken manuellt.

Ytterligare optimeringar

Ovanstående tips brukar räcka för de allra flesta. Vill du optimera dina bilder ännu mer kan jag rekommendera onlinetjänsterna TinyPNG respektive TinyJPG, som även tar bort onödig data från filerna och på så vis kan få ner filstorleken lite till. Försök dock inte att jaga enstaka byte, det är bara tidsödande.

Slutord

Som du säkert har märkt i denna artikel kan bildernas filstorlek göras mycket mindre utan att besökarna märker någon visuell skillnad. De kommer däremot märka att laddtiderna blir lägre, och du kommer förhoppningsvis märka att affärerna går bättre.