6 min read
Bildstorlekar och proportioner
Planera och välj rätt storlek, bildförhållande och format för bilderna i din webbutik.
Hur fungerar bilder i butiken?
Bilder hanteras på två olika sätt. Produktbilder laddas upp direkt till respektive produkt. Alla andra bilder som används på anpassade sidor, i temat och på andra ställen laddas upp till filarkivet under Utseende → Filarkiv.
Det är en bra idé att planera dina bilder innan du börjar ladda upp dem. Använd samma mått och bildförhållande för alla produktbilder. Detta skapar en enhetlig och professionell presentation på startsidan, kategorisidorna och produktsidorna.
Hur redigerar man bilder?
Bilder kan inte redigeras direkt i webbutiken. Redigera dem i ett bildredigeringsprogram innan du laddar upp dem. Adobe Photoshop är ett populärt betalt alternativ. Gratis eller webbläsarbaserade alternativ är bland annat GIMP, Paint.NET och Pixlr.
Bildförhållanden
Hur stor ska en bild vara, och vilken är den bästa storleken? Det finns inget entydigt svar, eftersom de rätta måtten beror på det bildförhållande som valts i ditt tema.
Bildförhållandet beskriver förhållandet mellan bildens bredd och höjd.
En bild med bildförhållandet 5:2 kan till exempel vara 5000 × 2000 pixlar, 2500 × 1000 pixlar eller 500 × 200 pixlar. Alla tre bilderna har samma form, men olika pixelstorlek.
Om du vill ha kvadratiska bilder väljer du bildförhållandet 1:1 och laddar upp bilder som till exempel 1000 × 1000 pixlar.
Bildspel
Du hittar inställningarna för bildspelsblocket på startsidan under:
Utseende → Teman → välj ett tema → Redigera → Innehåll → Startsida → Bildspel
Exempel 1:
Ställ in bildförhållandet för bildspelet till 5:1:
Ladda sedan upp bilder som är 1500 × 300 pixlar:
Exempel 2:
Ställ in bildförhållandet till 3:1:
Ladda sedan upp bilder som är 1500 × 500 pixlar:
Beskärs bilden?
Om du laddar upp en bild på 1500 × 300 pixlar men ställer in bildspelet på bildförhållandet 3:1 kommer bilden att beskäras. Bilden anpassas inte automatiskt för att matcha det valda bildförhållandet. Ladda upp en bild med samma bildförhållande som temainställningen för att undvika oönskad beskärning.
Produktbilder
Produktbilder visas både i produktlistor och på den enskilda produktsidan:
Ladda upp bilden till produkten under:
Sortiment → Produkter → välj en produkt → Redigera → Bilder → Ladda upp bild
Ställ sedan in bildförhållandet i temat under:
Utseende → Teman → välj ett tema → Redigera → Stil → Bilder
Exempel 1: Kvadratiska produktbilder
Ställ in bildförhållandet till 1:1:
Ladda sedan upp bilder som är 1000 × 1000 pixlar:
Exempel 2: Produktbilder i liggande format
Ställ in bildförhållandet till 3:2:
Ladda sedan upp bilder som är 1500 × 1000 pixlar:
Produktgruppbilder
En produktgruppsbild visas på själva produktgruppen:
Ladda upp produktgruppsbilder under:
Sortiment → Produktgrupper → välj en produktgrupp → Redigera → Egenskaper → Bild i produktgruppstabellen
Ställ in bildförhållandet i temat under:
Utseende → Teman → välj ett tema → Redigera → Stil → Bilder
Exempel 1: Kvadratiska bilder
Ställ in bildförhållandet till 1:1:
Ladda sedan upp bilder som är 1000 × 1000 pixlar:
Exempel 2: Bilder i liggande format
Ställ in bildförhållandet till 3:2:
Ladda sedan upp bilder som är 1500 × 1000 pixlar:
Butiksfronter
Bilderna i butiksfronterna i temat har bildförhållandet 5:4, oavsett hur många som visas i varje rad. De rekommenderade pixelstorlekarna ökar när färre butiksfronter visas, eftersom varje bild då tar upp mer utrymme.
4 butiksfronter:
1000 × 800 pixlar
3 butiksfönster:
1500 × 1200 pixlar
2 butiksfronter:
2000 × 1600 pixlar
1 butiksfront:
2500 × 2000 pixlar
Att välja den bästa bildstorleken för en webbutik
Det finns ingen bildstorlek som passar alla webbutiker. De rätta måtten beror på var bilden visas och på vilket bildförhållande som används i webbutikens design. Som en praktisk utgångspunkt fungerar kvadratiska produktbilder på 1000 × 1000 pixlar bra för många webbutiker. Det viktigaste är att använda ett konsekvent bildförhållande, se till att bilderna är skarpa och undvika filer som är större än nödvändigt.
Rekommenderade bildstorlekar: snabböversikt
| Bildtyp | Rekommenderade mått | Bildförhållande |
|---|---|---|
| Kvadratisk produktbild | 1000 × 1000 px | 1:1 |
| Produktbild i liggande format | 1500 × 1000 px | 3:2 |
| Bred bildspel eller banner | 1500 × 500 px | 3:1 |
| Smal bildspel eller banner | 1500 × 300 px | 5:1 |
| Butiksbild | Minst 1000 × 800 px | 5:4 |
Dessa mått är bra utgångspunkter snarare än absoluta krav. En större eller mindre bild kan ha exakt samma bildförhållande. Till exempel har både 1500 × 500 pixlar och 3000 × 1000 pixlar bildförhållandet 3:1.
Bildstorlek och bildförhållande är inte samma sak
Bilddimensionerna beskriver antalet pixlar i filen, till exempel 1000 × 1000 pixlar. Bildförhållandet beskriver förhållandet mellan bredden och höjden.
- 1:1 är en kvadrat.
- 3:2 är ett vanligt liggande format.
- 3:1 är brett och passar bra för banners.
- 5:1 är mycket brett och smalt.
Om den uppladdade bilden inte stämmer överens med det bildförhållande som valts i temat kan en del av bilden bli beskuren.
Använd samma bildförhållande för alla produktbilder
Produktlistningarna kan se ojämna ut om bilderna har olika former. Välj en bildmall innan du fotograferar eller redigerar produkterna, och använd den genomgående i hela katalogen.
Kvadratiska bilder är ett säkert val för många typer av produkter. Lämna lite utrymme runt produkten och placera den viktigaste delen nära mitten. Detta minskar risken för att viktiga detaljer tas bort om bilden beskärs i en annan vy eller försäljningskanal.
Vilket bildformat bör du använda?
- JPEG eller JPG: Ett bra val för fotografier. Det ger oftast en bra balans mellan bildkvalitet och filstorlek.
- PNG: Användbart när transparens krävs, men filerna är ofta större än JPEG-filer.
- WebP: Kan ge mindre filer samtidigt som den goda bildkvaliteten bibehålls. Kontrollera att plattformen och uppladdningsfältet stöder detta format.
- SVG: Lämpligt för logotyper och enkla illustrationer, men normalt inte för produktfotografier. Ladda endast upp SVG-filer från en pålitlig källa.
Produktbilder som hjälper kunderna att köpa
Bra produktbilder är inte bara tekniskt korrekta. De bör också besvara de frågor som en kund kan ha innan hen genomför ett köp. Beroende på produkten bör du överväga att visa:
- produkten mot en ren, enhetlig bakgrund;
- produkten från flera vinklar;
- viktiga material, texturer och detaljer;
- produkten i användning i en relevant miljö; samt
- en indikation på storlek eller skala när det är svårt att bedöma detta.
Se till att belysning, bakgrund, bildkomposition och avstånd är enhetliga i hela produktsortimentet. En enhetlig visuell stil gör katalogen lättare att överblicka och bidrar till att butiken upplevs som mer professionell.
Använd beskrivande filnamn och alternativtext
Ge bildfilerna meningsfulla namn innan du laddar upp dem. Till exempel är blue-linen-shirt-men.jpg mer användbart än IMG_4821.jpg.
Lägg till kortfattad alternativtext som beskriver vad bilden visar. Alternativtext hjälper besökare som använder skärmläsare och ger sökmotorerna användbar kontext. Beskriv bilden på ett naturligt sätt och undvik att upprepa nyckelord. Dekorativa bilder som inte tillför någon information bör normalt sett ha tom alternativtext.
Skapa en webbutik där dina produkter sticker ut
Bra produktbilder förtjänar en butik som presenterar dem tydligt. Med Abicart kan du skapa en professionell webbutik, anpassa designen efter ditt varumärke och få personlig support när du behöver det.