Bilder – storlek och format

Storlek på bilderna

Hur stora bilder du skall ha på tex startsida, kategorisida mm, bestäms av din design. Du bör ha fått instruktioner från designern angående gångbara storlekar. Om du inte vet vilken storlek som är lämplig är enklaste sättet att få det rätt är ta fram en bild som funkat tidigare och kontrollera storleken på den.

OBS! Även om vår front klarar stora storlekar bra om du har Flight så finns det begränsningar i admin. Begränsningarna är de samma oavsett Flight eller Responsive-base. Laddar du upp flera bilder samtidigt gäller begränsningen 200 MB (gemensamt) samt 10 MB per bild. Är bilden större än 10 MB kommer du att få ett felmeddelande.

Produktbilder generellt

Bilderna behöver inte vara kvadratiska (som våra testbilder) men du bör sträva efter att ha samma förhållande på bilderna  för alla dina produktbilder, framför allt de bilder som skall ligga i samma kategori. Kategori-visningen blir snyggare och ger ett lugnare intryck om bilderna ser ut som en enhet.

Vanligt är att man får bilder från leverantören. Ofta behöver dessa genomgå någon form av anpassning. De kan behöva friläggas (bakgrunden tas bort), beskäras eller läggas till bakgrund (om bilden är för snävt beskuren).

Om du sparat alla bilder i samma storlek, tex 800 x 800 pixlar, men dina produkter ser ut att vara i olika storlekar beror det på att bilderna är olika tajt beskurna eller fotograferade från olika avstånd.

Du kan inte arbeta med bildbehandling i Jetshop, det du laddar upp är det som kommer att visas.

En designer kan däremot anpassa bildvisningen t.ex. ett stående format om det passar bättre.

Läs även vår artikel om att koppla bild till produkt.

Bilder i Flight

Flight har automatiskt bildskalning i realtid som tar hand om alla mindre varianter av bilden. (Är bilderna för små däremot kan du fortfarande få problem med suddiga bilder.)

Undantag är bilder som hämtas in med HTML t.ex ett bildspel / slider. Om HTML används kan inte den inbyggda komponenten för bilder användas.

Det spelar heller ingen roll vad du anger på Bildinställningar i admin, det är vad designern angivit för visning för skärmstorlek som styr.

Produktbilder Flight

För produktbilder rekommenderar vi 2000-4000 pixlar till alla våra kunder för Flight.

Det är bra att inte ta större bilder än 5000px i bredd och/eller höjd. Ju större bilderna är desto mer tid kommer omskalningen att ta och påverka laddtiderna.

Dpi 72 eller 300 eller spelar ingen roll alls. Det är pixeltäthet för tryck/print och är inte relevant alls för visning på en skärm.

Att spara bilderna för web är viktigt så de inte ”väger” för mycket.

En produktbild bör absolut inte väga mer än 2MB. Det är superbra om man kan hålla sig under 800kb utan att försämra kvalitén för mycket.

Håller ni er under 2M i kvalitet så kan ni ladda upp hundra bilder åt gången via massuppladdningen i admin.

Produktbilder i Responsive Base

Produktbilder skalas av plattformen. De olika storlekarna är stor, mellan, liten och tumnagel. Vilka storlekar som dessa fått i just din shop kan du se i Admin under Bildhantering/bildinställningar. Storlekarna sätts ofta av designern, men standard är bredden:

Stor: 800 pixlar
Mellan: 600 pixlar
Liten: 400 pixlar
Tumnagel: 220 pixlar

Att det är bredden som anges innebär att höjdbilder kan bli väldigt stora (bilden fyller bredden och höjden blir så hög som bilden är), detta kan justeras av designern genom att sätta en ”maxhöjd”.

Enda gången produktbilden laddas i originalstorlek är om du går in på produktkortet och klickar på bilden. Även då anpassas bilden till den skärm du för tillfället använder.

När du arbetar med dina produktbilder tänk på att original du laddar upp inte är mindre än de mått som är satta för bredden i den stora visningen på produktsidan. Är ditt original mindre så kommer bilden att ”stretchas” ut till den angivna bredden vilket resulterar i en suddig bild.

Generellt så bör dina produktbilder inte vara mindre än 800 x 800, men inte heller större än 2000 x 2000. Hur du avgör hur stora bilder du skall ha beror till viss del på vad du säljer t.ex. skruv (inte så noga), lyxklockor (mer noga). Har du någon typ av zoomfunktion bör originalet vara minst dubbelt så stort som den stora visningen.  Besöker 90% av dina kunder din sajt från mobil gör inte bilderna onödigt stora.

Startsida i Responsiv Base

Startsidans bilder är annorlunda på det sättet att de inte skalas. Det är alltså viktigare på startsidan att bilderna är optimerade och inte är större än vad de behöver vara.

Om bilden skall fylla hela bredden på startsidan ca 1920px bredd (valfri höjd) sparad för webb. En bild bör inte vara tyngre än ca 500 kB.

Tillsammans bör alla bilder som visas på startsidan inte väga mer än 10 MB tillsammans (undantag för produkter och dess bilder som är skalade även om de visas på startsidan.

Startsidans bilder laddas inte upp i bildhanteringen utan under filer.

Övriga bilder i Responsive Base

I Responsive Base kan det hända att du även jobbat med andra typer av bilder själv, då gäller följande: För mindre bilder tex logotyp, knappar mm gäller dubbelstorlek (sparad för webb), om man vill att det skall vara skarpt.

Ser dina bilder inte ut som du tänkt dig?

Har du problem med att bilder ser inverterade ut? De är troligen sparade i CMYK. Det är färgsättning för tryck. För webb skall det vara RGB.

Bilden får ”fel färg”/ ser dassig ut.
Problemet kan vara att det finns en ”color profile/färg profil” i originalbilden. När vi optimerar bilden för webb så skalas den bort.

Adobe RGB och ProPhoto RGB: Färgprofiler som används i Adobe Photoshop och Adobe Photoshop Lightroom – är främst för att förbereda bilder för utskrift.

sRGB: färgprofilen som används av de flesta webbläsare för att visa bilder på webben är den som skall användas.

Mer info finns här: https://helpx.adobe.com/se/photoshop/using/color-settings.html#Alternativf%C3%B6rarbetsf%C3%A4rgrymd