Hur du optimerar bilder för webben

Optimera bilder

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-bild

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

Webbmekanikern

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

Vektorgrafik

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.

100% kvalitet80% kvalitet

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.

Ivar Johansson

Skriven av

Ivar började med webbutveckling för tio år sedan och har sedan dess utvecklat breda kunskaper inom framför allt webbprestanda, sökmotorer och användarupplevelse. Idag driver han eget företag där han skapar webbplatser som är snabba, säkra och enkla att hantera.

  1. Maria Sundqvist

    16 januari, 2015

    Tack för jättebra tips!

  2. Marit Johansson

    30 oktober, 2015

    Snyggt! :)

  3. Johan

    1 december, 2015

    Vektorfiler och hur jag kan använda dem på webben

    Först vill jag bara nämna att jag har Photoshop.

    Just nu har jag x antal användningsområden som jag skulle vill få lite hjälp med att förstå.

    – Jag vill ha en liten icon eller logga i något av hörnen på mina youtube videos.
    – Jag vill ha en logga på min wordpress sajt.
    – jag vill vektor iconer på min wordpress sida.

    Nu funderar jag på två lösningar. 1. Att beställa en vektorfil från fiverr.com. 2. Att beställa en vektorfil från någon Stocktjänst. Så som Istockphoto, Shutterstock eller vad det nu kan komma ifrån.

    Det verkar ju finnas lite olika typer att filer för vecktorgrafik och jag vet inte vilken jag ska ha. ESP, SVG och AI. Nu har ja just laddar ner två Iconer i ESP formatet.
    Nu behöver jag rimligtvis ett program som kan jobba med vektorgrafik och jag laddade ner något XQuartz som jag inte alls fattat. Så jag kommer att ladda ner Illustrator 30 test period och testa det.

    För grejen nu är väl att man ska kunna anpassa vektorfilen och sedan göra om den till jpg och använda den då i just jpgformat. För wordpress tar ju inte vektorgrafik eller har jag fattat detta fel.

    Och en annan sak som jag undrar. När jag köpt ett ICON SET men många olika iconer så vill jag ju plocka ur en och en. Hur gör man det? Det verkar ju inte helt enkelt och självklart.

    Hoppas på Svar!

    Johan

Mejla mig: