Helpdesk

Design - Vad ska jag tänka på då jag lägger upp bilder i min webbshop?

Vad ska jag tänka på då jag lägger upp bilder i min webbshop?

Det finns framförallt två saker att tänka på när du lägger upp bilder i din webbshop, dessa är pixelstorleken och filstorleken. Båda går hand i hand och påverkar hur din bild kommer fungera på webben.

  • Välj en pixelstorlek som motsvarar det största visningsformatet i din butik. Om din produktsida visar bilden i 200 x 300 pixlar ska du lägga upp produktbilden i det formatet.
  • Filstorleken ska vara så liten som möjligt utan att du äventyrar bildkvaliteten. Tänk på att en bild avsedd för tryck kan vara upp till tio gånger större än samma bild avsedd för webb. Du kan enkelt göra om dina bilder till webbanpassade i ett bildredigeringsprogram.

Läs mer om pixelstorlek och filstorlek under Bildhantering nedan.

Varför är filstorleken viktig?

När en kund besöker din butik laddas all text och alla bilder på sidan ner till kundens webbläsare innan sidan kan visas. Det betyder att ju mer data (mätt i kilobyte) din sida innehåller, desto längre tid tar det att ladda sidan. Eftersom bilder innehåller mycket mer data än text så är det enklaste och effektivaste sättet att snabba upp din butik att optimera filstorleken på dina bilder.

Det finns många skäl att att optimera filstorleken på bilderna:

  • Stora bilder ger en långsam sida, vilket medför sämre kundupplevelse och sämre ranking hos sökmotorerna.
  • Stora bilder ger mer datatrafik, vilket kan medföra extra trafikavgifter för butiken om trafiken överskrider den kvot som ingår i ditt avtal.
  • Stora bilder kräver mer lagringsutrymme, vilket kan medföra avgifter för extra lagringsutrymme för butiken om du överskrider den kvot som ingår i ditt avtal.

Bildhantering

Pixelstorlek

Pixelstorleken är det vanligaste man tänker på då man ser bilder på nätet. Detta är bildens fysiska storlek (bredd x höjd ) i pixlar.

Ex: 200 x 300 pixlar, innebär en bild som är 200 pixlar bred och 300 pixlar hög.

Som standard rekommenderar vi att du laddar upp produktbilder upp till 700  x 700 pixlar. Använder du dig av zoomfunktionen bör dessa vara större,
ca 2000 x 2000 pixlar brukar fungera bra för de flesta butikerna. Ju större bilder du laddar upp desto mer inzoomad blir bilden.

1.jpg         2.jpg
Bild 400 x 267 pixlar


        Bild för zoom
        vänster 1000 x 668 pixlar
        höger 2000 x 1335 pixlar

Tips: Upplever du att bilden inte blir större i butiken fastän du laddar upp en med större pixelstorlek? Då måste bildtransformen uppdateras i din butik. Kontakta vår helpdesk för att få hjälp med detta.

Filstorlek

Den andra delen som är viktig att hålla koll på då du lägger upp bilder på nätet är bildens filstorlek, dvs. hur stort lagringsutrymme en bild kräver.

Ex: En bild som tar upp 25 kb, innebär en bild vars filstorlek är 25 kilobyte.

Idag då webbshoppar ska fungera i många lägen: allt från surftillfället på tåget på väg till jobbet, till då kunden sitter vid sin stationära dator med ett snabbt bredband tillkopplat hemma, är det extra viktigt att tänka på filstorleken. Filstorleken påverkar lagringsplatsen i din webbshop och hur snabbt bilder laddas in i din webbshop.

Exakt hur stor en bilds filstorlek bör vara går inte att specificera, eftersom det beror på pixelstorleken samt hur mycket data (t.ex. färger i ett fotografi) som är lagrat i bilden. Ett tips från oss är att försöka spara sina bilder med en så hög inställning som bilden klarar av utan att bli otydlig/ grumlig / pixlig. Många bildbehandlingsprogram tillhandahåller en inställning där man kan välja kvaliteten på bilden man sparar. Välj gärna high istället för maximum på denna.

3.jpg          4.jpg
Bild sparad med maximum inställningar 400 x 267 pixlar (85 kb)          Bild sparad med high inställningar 400 x 267 pixlar (27kb)

5.jpg
Bild sparad med low inställningar 400 x 267 pixlar (9kb)

Den sista bilden visar en bild som har sparats med för låg kvalitet och därför har pixelartefakter börjat dyka upp.

Photoshop kommer med en egen funktion för att spara bilder på webben där man direkt har möjlighet att förhandsgranska hur bilden kommer bli då man sparat ut den. Du som har Photoshop hittar den under File -> Save for Web & Devices.

6.jpg
Fönstret för Save for Web & Devices i Photoshop

Upplösning

Du kanske har hört talas om upplösning (eller dpi) i bildsammanhang. Detta kan ändras i bildbehandlingsprogram och det påverkar bl.a. bildens filstorlek. Det är framförallt bilder i tryck där man måste vara noga med bildupplösningen, medan det på webben fortfarande gäller en standard på 72 dpi (upp till 96 dpi) Denna håller på att ändra sig i takt med att det produceras bättre bildskärmar men vi rekommenderar att du håller dig till 72 dpi.  

Har du fler frågor? Skicka en förfrågan

0 Kommentarer

Artikeln är stängd för kommentarer.
Powered by Zendesk