Woolman SE

Ge bilderna tid – Så här får du ordning på bilderna i din webbutik

Ge bilderna tid – Så här får du ordning på bilderna i din webbutik

Bilderna spelar en viktig roll i webbutiken. Många skulle faktiskt säga att de har huvudrollen.

Bilderna berättar detaljer om webbutikens produkter och ditt företag. Talesättet att en bild säger mer än tusen ord stämmer också i webbutiken. Bilder används när orden inte räcker till.

I webbutiken finns inte bara produktbilder utan också andra bilder som har med butiken att göra. Bilder som skapar stämning och berättar en historia. Det finns styrka i bilder.

Men om bilderna laddas upp långsamt förlorar de mycket av sin potential. Dagens digitalkameror producerar stora och ytterst exakta bilder. Att överföra bilden direkt från kameran till nätet kan låta snabbt och enkelt, men behandlar du inte bilderna korrekt får du problem med uppladdningen.

Det är också viktigt att spara de ursprungliga bilderna och säkerhetskopiera dem. Du kan ha nytta av de ursprungliga bilderna i oväntade situationer. Ibland kan också något gå på tok vid bildbehandlingen. Då är du glad om du kan börja från början.

Bildbeskärning och bildförhållande

Bildbehandlingen kan gärna börja med beskärning. Vi rekommenderar att du delar in bilderna i grupper: produktbilder, bannerbilder, artikelbilder... Listan kan fortsätta enligt vilka bilder du behöver i din webbutik.

Målet med beskärningen är att få bilderna att passa på de ställen de ska vara, produktbilder i produktrutfältet och på produktsidan, bannerbilderna i banners och så vidare.

Beskärningen definierar också bildförhållandet. En bra tumregel vid beskärningen är att samma bildförhållande underlättar placeringen av bilderna i webbutiken.

För produktbilder rekommenderar vi ett bildförhållande på 1:1, alltså en kvadrat. Kvadratformade bilder sitter snyggt i produktrutfältet. Men det är ingen fara om produktbilderna i din butik har ett annat bildförhållande. Viktigast är ändå att förhållandet är det samma på alla bilder i en bildgrupp.

I banners passar ofta långa, låga bilder. Bannerplaceringen och storlekarna kan förstås variera beroende på din webbutiks tema.

 EXEMPEL PÅ BILDFÖRHÅLLANDEN

Bildens storlek

En digital bild har bara en storlek: antalet pixlar på bredden och höjden. Bildstorleken anges i formen 2048 x 2048 pixlar (bredd x höjd).

Ofta när det talas om bildstorlek blandar man in termer som beskriver bildens utskriftsupplösning, såsom 300 DPI. DPI berättar i vilken storlek en bild skrivs ut. Utskriftsupplösningen och pixelstorleken har ett samband, men i den digitala världen är endast mängden pixlar av betydelse. Bildens skärpa bestäms främst av enheten du tittar på den med.

Observera att ordet upplösning används om både bildens utskriftsupplösning (DPI) och bildens pixelmängd. Termen kan alltså orsaka förvirring. Därför använder vi termerna utskriftsupplösning och pixelmängd.

I Shopify är den maximala storleken på bilder 4472x4472 pixlar. Det är inte ofta man behöver en så stor bild. För produktbilder räcker bildstorleken 2048x2048 pixlar. I banners är vanliga bildstorlekar bl.a. 3000x1500 (2:1), 3200x2400 (4:3) och 1920x1080 (16:9).

Precis som vid beskärningen gäller också här regeln: bilderna i en grupp borde vara lika stora. I banners kunde regeln fortsätta: bildstorleken bör bestämmas enligt bannerns placering.

Du kan ändra bildernas pixelmängd till exempel med bildbehandlingsprogram. Kom ihåg att om du förstorar bilden (ökar mängden pixlar) så blir den kornigare. 

Optimering av en bildfil

Med optimering av en bildfil avses att man sparar den slutliga bilden så effektivt som möjligt. En effektivt sparad bild har en mindre filstorlek och laddas därför upp snabbare. En optimerad bild mäts i kilobytes i stället för megabytes.

Filstorleken påverkas bland annat av:

  • Animering av bilden (GIF)
  • Filformatet
  • Bildkvaliteten

De tre viktigaste filformaten för bilder är: GIF, PNG och JPG.

GIF-formatet är nyttigt om bilden är animerad, det vill säga innehåller flera bilder som i en video. Men animerade GIF-filer blir lätt stora, så fundera noga på om du vill använda sådana. Väldigt stora bilder påverkar hur snabbt sidan laddas.

PNG-formatet möjliggör genomskinlighet och en begränsad färgpalett. PNG-bilder används nästan bara när det behövs genomskinlighet eller om man vill ha en färg som ändras bakom bilden eller en bild ovanpå en annan.

JPG-formatet stöder inte genomskinlighet eller animering, men det gör att bilden kan sparas med olika kvaliteter. Ofta anges kvaliteten som ett numeriskt värde på 1-100. Då är 1 den sämsta och alltså kornigaste bilden. 

JPG-KOMPRIMERINGENS VERKAN PÅ EN BILD. 100/40/1-KVALITET, UPPIFRÅN NERÅT.

Det optimala värdet varierar, men vanligen räcker en bildkvalitet på 40–60. Ett lägre värde betyder att bildfilen komprimeras mer vilket innebär en mindre filstorlek.

Minneslista om bilder: 

  • Spara de ursprungliga bilderna
  • Dela in bilderna i grupper
  • Beskär bilderna enligt grupp
  • Använd samma pixelmängd i hela gruppen
  • Komprimera bilderna effektivt, då laddas sidan snabbare
Joonas Toroi, Design lead / Woolman

 

Läs också:

Nyhetsbrev