Bildhantering

Bildhantering i din butik

En e-handel består ofta av 80% bilder, därför är det viktigt att veta vilka storlekar och format man ska använda. Detta för att få så skarpa bilder som möjligt och ge en bra besöksupplevelse, men också för att bilderna ska ladda in så snabbt som möjligt. Här kommer en kort guide till hur du bör tänka vid bildhantering och vilka storlekar som passar olika syften. 

Detta går vi igenom i denna artikel

1. Ladda inte upp dina originalbilder direkt i butiken
2. Kan man lägga till utrymme i mediabiblioteket?
3. Spara bilderna i rätt format
4. Optimera / komprimera dina bilder
5. Tips för bildstorlekar hos Starweb 
6. Tips för att redigera / hitta bilder

Ladda inte upp dina originalbilder direkt i butiken

I mediabiblioteket har du 4GB utrymme. För att spara plats i ditt mediabibliotek tipsar vi om att optimera dina bilder innan uppladdning. Detta gäller alla bilder som laddas upp i mediabiblioteket. Om du laddar upp originalbilderna kommer dessa att skalas till rätt storlek, men de kommer inte att optimeras. Utöver detta är ofta originalbilder också väldigt stora, och den största storleken vår plattform tillåter dig att ladda upp är 4096x4096 px eller 10MB i filstorlek.

Kan man lägga till utrymme i mediabiblioteket?

Ja, ni kan addera extra utrymme i ert mediabibliotek. Detta kostar 50kr/mån per GB. Om ni önskar att lägga till utrymme maila oss så hjälper vi dig. 

Spara bilderna i rätt format

Det vanligaste filformatet för bilder är JPEG (.jpg/.jpeg), PNG (.png), GIF (.gif), SVG (.svg) och WebP (.webp). 

För illustrationer (Logotyper, ikoner, diagram etc) tipsar vi om att använda SVG eller PNG. Då får du bästa resultatet i förhållande till filstorleken. 

GIF används för kortare videoklipp av en rad ihopsatta bilder. Detta kan användas på startsidor för att visa upp ett kortare videoklipp.

För övriga bilder på sidan (produktbilder, miljöbilder etc) tipsar vi främst om WebP. WebP är ett filformat som Google har lanserat för snabbare inläsningstider på sidor utan att försämra högkvalitativa bilder. WebP har mycket mindre filstorlekar än de traditionella JPEG & PNG, en fil som i JPEG är 2MB stor kan i WebP bli 200kB, vilket kan göra stor skillnad för laddningstiden på en sida med många bilder. Det går däremot bra att använda sig av JPEG & PNG också. 

Optimera / komprimera dina bilder

Att optimera bilder innebär att komprimera bilderna. Att komprimera bilderna påverkar inte bildernas storlek (mätt i pixlar) utan endast filstorleken. När du sparar din bild som JPEG, PNG, SVG eller WebP i ditt bildredigeringsprogram brukar det finnas en inställning som heter Kvalitet. 100% betyder 'ingen komprimering'. Väljer du till exempel 80%ger det ingen synlig skillnad på skärmen, men kan minska filstorleken till en femtedel eller mer. På många bilder kan du minska ned till så långt som 60% utan att det blir någon synlig skillnad.

I praktiken betyder det att om bilderna på din startsida tar 2 sekunder att ladda kan du minska den tiden till 0,4 sekunder efter optimering.

Många undrar över vad ‘upplösningen’ ska vara för bilder på en hemsida, 72, 150 eller 300dpi/ppi (dots per inch och pixels per inch). Den här typen av upplösning som använder dpi och ppi kallas utskriftsupplösning och gör bara skillnad när bilder ska skrivas ut fysiskt. På en skärm spelar dessa siffror ingen roll, det är antalet pixlar på bredden och höjden som påverkar hur bilden visas på en skärm.

Om du inte har något bildhanteringsprogram kan du använda dig av tjänster på nätet för att komprimera eller konvertera dina bilder. På https://tinypng.com/ kan du konvertera dina bilder till JPEG, PNG & WebP och på https://webp-converter.com/ kan du konvertera dina JPEG eller PNG bilder till WebP samt komprimera dessa. Båda dessa onlinetjänsterna är gratis.

Tips för bildstorlekar hos Starweb 

Det viktigaste för er att tänka på är att bilderna i er butik har samma grundstorlek.

Genom att standardisera storleken för era produktbilder till exempelvis 1000x1000 px och övriga bilder till 1920x1080px skapar ni en enhetlig estetik genom hela butiken och gör det möjligt att använda samma bild på olika sätt och på olika ställen.. Varje modul har en egen funktion för komprimering vilket gör det är enkelt att anpassa bildstorleken för de olika modulerna eller blocken på sidan efter hur just de visar bilder 

Nedan finner ni en lista på vår rekommendation för olika  bildstorlekar i plattformen. Dessa mått är rekommendationer för standard och ger flexibla användningsmöjligheter samt minskar risken för att bilder upplevs pixliga eller suddiga av besökare. Andra mått kan förstås funka lika bra. Om du har egen design på er sida eller andra storlekar på de olika bildmodulerna , prata med din designer om vilken storlek som passar din butik bäst.

Tips för att redigera / hitta bilder

Om man har produktbilder med en bakgrund som skiljer sig ifrån varandra, så kan det bli ett finare resultat om man tar bort bakgrunden från produkten i bilden. Det finns AI-verktyg som enkelt tar bort bakgrunden från produkten. Exempel på ett sånt verktyg är https://www.remove.bg/ eller https://remove-bg.ai/. Där kan man lägga till sina produktbilder för att ta bort bakgrunden.

För att redigera bilder till kampanj eller miljöbilder så kan man använda sig av gratis bildbehandlingsprogram: https://www.gimp.org/ eller https://www.canva.com/. Har du tillgång till Adobes program, så är Photoshop att rekommendera för bildbehandling.

Vill man hitta fina miljöbilder så kan man hämta hem royalty-fria bilder. Några sidor som har royalty-fria bilder är pexels.com, unsplash.com eller pixabay.com. Royalty-fri innebär att du kan använda dessa gratis i din butik. Har du köpt design av oss kan du även välja 3-8 bilder från shutterstock.com som vi hjälper dig att ladda ner (antalet av bilder för nedladdning är beroende på storleken av designpaketet). Kontakta din designer med länkar till bilderna så hjälper de dig. 

Om du önskar att skapa GIF:s för sidan finns även sådana online-program för gratis användning. Tex https://giphy.com/create/gifmaker och https://www.canva.com/create/gif-maker/.

----------------

Behöver du hjälp så kontakta gärna vår support
Mejl: support@starweb.se Telefon: 040 - 602 09 00