Bildstorlekar

En guide till bilder och dess storlekar som du använder i din butik.

Varför är det viktigt? 

Bilderna i din butik är en mycket viktig del av hur dina kunder uppfattar dig och ditt varumärke. Första steget är såklart att ta eller hitta bilder som ger din butik rätt utryck för hur du vill uppfattas. När du har hittat dina bilder hoppas vi att denna artikel hjälper dig att använda dina bilder på bästa sätt i Vendres plattform. 

Storlekar på bilder

Det är viktigt att du tänker på storleken du har på dina bilder, dels för att de inte ska ta för lång tid att ladda in men också åt andra hållet för att de fortfarande ska vara skarpa. Bredden är viktigare än höjden, höjden kan du ofta anpassa i blocket eller att höjden anpassar sig automatiskt efter blocket det är alltså bättre att fokusera på bredden för att sedan ställa in höjden i drag & släpp. Vi förespråkar att bilder som laddas upp är 2560px breda. Vill ni veta mer, vänligen läs vidare nedan.

Ta reda på vilken gridstorlek du har på din sida. Standard brukar vi köra på 1280px, det betyder att du bör ladda upp bilder som är minst 1280px breda. Vill du ha retina support för samma bilder, ta det gånger två, alltså 2560px breda bilder.

De flesta bilder beskärs automatiskt innan de renderas och visas för besökare. Det betyder att besökare får optimerade bilder beroende på vilken enhet/upplösning och pixeldensitet de använder. Kom ihåg att om en besökare sitter på stor skärm med retina och den efterfrågade storleken på bilden som efterfrågas inte är tillräckligt stor, så kommer användaren få originalbilden.

Om bilder ska visas i fullbredd oavsett upplösning, så brukar det räcka med 2560px bilder. Att visa retina för användare som sitter på dessa breda skärmar, alltså bilder på 5120px, så börjar vi räkna MB istället. Dessa stora bilder kommer antagligen ladda ganska segt för användaren, och användarupplevelsen försämras. 2560px breda bilder känns därför som en bra standards som maxstorlek på bilder. Dvs om du laddar upp en 2560px bild, så är det den största bilden som kommer laddas för dessa användare. Detta är ofta bättre än att ladda in ännu större bilder, behöver du använda större bilder än så får du lite tips i nästa stycke, men tänk på att inte använda än större bild än nödvändigt. 

För bilder i fullbredd blir det lite mer komplext. Detta beror på att det fins väldigt väldigt stora skärmar. Det gäller helt enkelt här att göra en avgränsning, kanske är det okej att din hero bild inte är knivskarp för en person som gillar att surfa med sin 60" teve som skärm.

Vill du helgardera dig för större skärmar kan du räkna med att en större extern skärm på 27" är ungefär 2600 px bred... resten kan du räkna ut själv 📏

Produktbilder 

För dina produkter lägger du in bilderna på produktkortet direkt i Admin, här kommer lite tips för dina produktbilder: 

• Alla bilder bör vara i samma format för att se enhetligt ut 
• Gå efter samma regel där bilderna ska vara dubbla storleken av ytan de ska fylla ut. 
• Ha gärna samma bakgrund på alla dina bilder 

För dig som ska ta nya bilder så rekommenderar Vendre att göra bilderna till kvadrater, ett bra format som blir skarpt i många upplösningar är 1600 x 1600 px. 

Produktbilder via Excel Import & Export

För att uppdatera bilder via Excel Import & Export används kolumnen "images". Tips! Är du ute efter instruktion för att "ladda in alla produktbilder från en annan e-handel eller ftp-server tipsar vi istället om denna guide. 

Kategoribilder 

Även bilder för kategorier ligger inne och hämtas från administrationen. Det finns i Vendres standard två olika sätt att visa bilderna i kategorier. Antingen i fullbredd bakom kategoribeskrivningen eller till höger om beskrivningen som en mindre bild. Störst krav här är bilder som ska ligga i fullbredd som bakgrund, här ska du tänka på att: 

• Bilden bör vara minst 4000 px bred
• Bilden bör ha ett filter eller liknande på sig som mörkar ner den då texten är vit. Detta filter kan läggas till i t.ex. Photoshop. En bra riktlinje är att ha filter svart med en opacitet på mellan 20 - 30%