The weight of images

2017-05-03

Blog

När vi på Rabalder Media skriver om bilder kommer det inte att handla om budskapet i bilden eller dispositionen. Vi kommer såklart att prata om hur bilder påverkar en webbplats prestanda och hur bäst optimera denna prestanda.

Innehållet är som vanligt ämnat de som önskar öka sin kunskap och skapa bättre förutsättningar för beställning av webb-projekt. Inga förkunskaper i webbutveckling krävs.

Snabbare är bättre

Vi kommer att driva diskussionen nedan efter tesen att snabbare är bättre. En webbplats som laddar snabbt kommer att upplevas som mycket attraktivare för användaren. Detta kommer att leda till fler sidvisningar, längre besök och högre konvertering.

Vikten av bilder.

Bilder är av stor vikt på webben. De kan på ett snabbare sätt jämfört med text förmedla ett önskat budskap. Men bilder har även en annan typ av vikt. Vikten i bytes. Människor mäter vi exempelvis i kilogram. Bilder mäter vi i kilobytes. Eller om någon har klantat sig, åtminstone gällande webben, i megabytes ;)

En tung, eller stor, bild tar tid för webbläsaren att läsa in. Detta är tid som användaren inte har. Därför måste varje bild komprimeras bäst möjligt. Redan vid skapandet av designen bör varje bild vara högst motiverad. Annars gör den mer skada än nytta.

För att förstå hur mycket skada en ogenomtänkt bild kan göra kan vi ta som exempel att vid strax över 100 kilobytes anser Google att deras typsnitt bidrar till att göra en webbsida ‘ganska’ långsam. En icke optimerad bild av lite större format kan lätt väga 2 MEGAbytes. Dvs 20ggr så mycket som den font Google anser gör en påverkan negativt. Det är såklart inte ok. Okej, poängen är klar. Dåligt optimerade bilder bidrar en negativ upplevelse för besökaren. Vad bör man tänka på för att undvika detta när ett projekt planeras?

  • Det är orimligt att tro att alla som laddar upp bilder på en webbplats har tid eller kunskap i hur bilder optimeras. Därför bör detta byggas in i projektet. Duktiga utvecklare vet hur detta görs. Koden skall automatiskt optimera bilder som ingår i projektet.
  • Är projektet redan sjösatt finns fortfarande saker att göra för att optimera bilder. Wordpress och andra CMS tillåter användaren att minska storleken på filerna. Bra instruktioner för detta finns här
  • Få bilder bör överstiga 2000pixlar i bredd.
  • Formatet .jpg är mindre jämfört med formatet .png om bilderna inte behöver vara transparenta.
  • Börja i tid. Redan när ni initierar ett webb-projekt bör varje bilds vara eller icke vara tänkas igenom noggrant.

Denna bloggpost är en del i vår serie i kompetensutveckling för beställare av webb.