Att veta vilka dimensioner du ska spara ner bilder i för att de ska funka så bra som möjligt med Vendres bildblock kan vara en utmaning. Här går vi igenom alla block, hur de fungerar och våra rekommendationer samt "best practice".
Under avsnittet bilder och video i drag och släpp-verktyget finns alla våra bildblock. Kolumnblocket är ett bonusblock som också kan vara bra att veta om – hur du kan använda bilder i det blocket går vi igenom sist.
📌 Bra att tänka på
- Något att ha i åtanke när det gäller bilder är att utgå ifrån blockets höjd/bredd och multiplicera med två för att säkerställa att bilden behåller sin skärpa även på retinaskärmar. Då retinaskärmar har högre upplösning (fler pixlar per tum) än traditionella skärmar blir bilden för liten, och därför suddig, annars.
- Tänk på att många stora bilder kan göra att din butik tar längre tid på sig att ladda.
- Har bilderna text eller illustrationer på sig sparas de med fördel ner som PNG för att behålla sin skärpa. JPG/JPEG fungerar bra för "vanliga" bilder och är ett utmärkt val då bilderna automatiskt komprimeras och tar upp mindre plats än en PNG-fil med samma dimensioner.
- Förslagen på bildstorlekar i artikeln är just det: förslag. Många olika faktorer påverkar om det är rätt i din butik eller ej. Utgå gärna ifrån måtten, men testa dig fram och justera om något ser fel ut.
1-4 bilder med fasta dimensioner
Det här är ett av våra senaste block. Vi såg ett behov av att kunna ladda upp bilder med fasta dimensioner och skapade alltså detta för att underlätta användningen av bilder för våra kunder. Kontakta PS om du har en äldre butik och vill implementera blocket i din butik.
Hur stora bilder du ska ladda upp i detta block beror på hur många bilder du väljer att ha i rad (4 bilder i rad = mindre bilder, endast 1 bild kräver en större bild) samt om du väljer att visa blocket i fullbredd eller ej, men nedan följer en generell guide du kan utgå ifrån om du är osäker. Om bilderna fortfarande är suddiga kan du testa att öka höjden och bredden något. Måtten är baserade på 1 bild i rad. Visar du 2, 3 eller 4 kan du dividera med antalet bilder i rad för att få fram rätt dimensioner.
1:1
2560 px * 2560 px
2:3 / 3:2
1706 px * 2560 px / 2560 px * 1706 px
3:4 / 4:3
1920 px * 2560 px / 2560 px * 1920 px
9:16 / 16:9
1440 px * 2560 px / 2560 px * 1440 px
Bild med text-blocken (1, 2, 3 och 4)
Här styr du själv höjden på blocket, och den är densamma i alla skärmstorlekar. Det gör att det blir lite klurigare att föreslå exakta dimensioner. Du kan dock i stort sett alltid utgå ifrån 2560 px i bredd om det bara är en bild (eller 2880 px för fullbredd). Samma sak gäller här som ovan: har du fler bilder i rad kan du dividera den föreslagna bredden med antalet bilder för att skapa bildfiler som inte är riktigt lika stora. Tänk på att hålla bildfokuset i mitten av bilden då sidorna kapas beroende på skärmstorleken.
Exempel- 1 bild, ej i fullbredd, med en höjd på 500 px: 2560 px * 1000 px.
- 3 bilder i fullbredd utan mellanrum med en höjd på 350 px: 960 px * 700 px
Kollektion
Även detta block beter sig olika beroende på vilken skärm du sitter på och vilken procent du skriver in i blockets inställningar. Utgår du ifrån 67 % (standardsiffran som står inskriven när du drar in blocket på sidan), kan du räkna med 1260 px * 1715 px till den stora bilden och 1260 px * 838 px till de två små. Väljer du istället 50% kan du följa instruktionerna i blocket ("50% är hälften så hög som bred" – detta stämmer dock inte till 100%) för att få fram rätt mått, d.v.s. 1260 px * 1280 px och 1260 px * 620 px.
Slider
Slider-blocket är en favorit av den enkla anledningen att bilderna du laddar upp behåller dimensionerna de laddas upp i (så ska du använda sliderfunktionen, se till att alla desktopbilder respektive alla mobilbilder är lika stora, annars ändras höjden på blocket beroende på vilken bild som visas för stunden). Lägger du endast in en bild så aktiveras inte sliderfunktionen PLUS att du kan ladda upp en matchande mobilbild med helt andra dimensioner. Detta är perfekt om du t.ex. vill ha en bredare rektangulär herobild i desktopvyn och en något mer komprimerad i mobilen, t.ex. en kvadratisk bild.
Här finns egentligen inga rekommendationer utöver att bredden bör vara 2560 px (eller 2880 px om du väljer fullbredd) i desktop och ca 500 px för mobilen. Det vanligaste är att ha en vertikal rektangel som desktopbild och till mobilen antingen en rektangel eller kvadrat, här är det inte lika noga. Undvik dock alldeles för "platta" bilder i mobilen, då blir det svårt att lyckas få in tillräckligt med detaljer i och med att den visas på mindre skärmar.
Herobild, parallax
Detta block fungerar ungefär som bild med text-blocken, men med något färre inställningar. I detta block kan du inte skriva in text, så vill du ha text på bilden får det göras i ett externt bildredigeringsprogram (tänk på att texten då inte plockas upp av SEO). Till skillnad från bild med text-blocken kan du här ställa in olika höjd för bilderna som visas mobil och i desktop.
Kolumner
Detta block är tekniskt sett inte ett av våra bildblock, men i och med att du kan ladda upp bilder via textredigeraren kan du lägga in bilder även här – perfekt om du vill visa upp kategorier, uspar eller annat med text undertill! Ladda upp bilder med samma dimensioner (och sedan samma storlek. Storleken ställer du in i bildinställningarna – dessa kommer du åt via bildikonen som heter infoga/redigera bild – om du inte vill att de ska vara i "fullbredd" i kolumnen.
Hoppas att det här var till hjälp och att du nu har lite mer koll på hur du ska tänka när du skapar bildmaterial till din butik! Lycka till ✨
P.S. Vill du ha mer kontroll gällande hur blocken ser ut i de olika vyerna (desktop/surfplatta/mobil) kan du alltid inaktivera blocket på en viss skärmstorlek och kopiera det med andra inställningar specifika för den vy du vill anpassa.