Har du någon gång undrat varför bilden du laddade upp inte passar in på hemsidan?

I Snowfire har vi gjort det enkelt för dig. Bildsystemet letar efter det mest intressanta i bilden och strävar efter den bästa klippningen. Sedan kan du själv bara gå in och finjustera det sista genom att även flytta beskärningen på det sätt som du helst vill ha det. Det är ett intelligent system men när du jobbar med foton är det även några saker som du själv behöver tänka på ibland redan innan ditt foto tas. 

Rätt bild på rätt plats

Har du bilder på din hemsida där resultatet inte blir vad du tänkte dig? Oftast beror det oftast på en av dessa två saker: 

• Fel ratio - Det bildformat (höjd och bredd) som din bild har samt samt det bildformat i det block på din hemsida där du vill lägga upp din bild matchar helt enkelt inte. 
• För lågupplöst - Din bild är för liten i dimensioner och för lågupplöst för det block där du vill lägga bilden. 

1. Användningsområdet styr val av bild

Alla blocken är designade och optimerade så att bilderna optimeras. Här kommer en guide på vilka dimensioner, ratio, och pixlar din bild behöver ha för att passa bäst i de olika bildhållarna i blocken.

Vilket format har din bild (aspect ratio)?

Ska din bild ligga som bakgrund, visa en produkt eller en grupp med människor, eller visa ett grafiskt märke. Användningsområdet påverkar vilken bild i både format och kvalitet som bäst passar för respektive område.

Vikt och optimering av bilder för webben

Normalt är bilderna på din webbsida i genomsnitt 19-21 % av webbsidans totala vikt så att lägga upp optimerade bilder gör att sidan laddar snabbare. Läs mer om vikt och optimering och spara om dina bilder till rätt format här:
3 snabba SEO-tips och 4 gratisprogram för att komprimera bilder

Pixlar, DPI, PPI

Pixlar (px) är en bilds dimension, dvs antalet pixlar över längden och bredden på en digital bild (T.ex 1920 x 1040px).

DPI (dots per inch) hänvisar mer till upplösningen på en bild när den skrivs ut. En 300 DPI-bild är ett högkvalitativt foto för utskrift. På webben är allt 72 DPI.

PPI (pixels per inch) är antalet och tätheten av pixlar en skärm kan visa. PPI står för pixlar per kvadrattum och är ljusfyrkanter som passar in i en tum på en bildskärm.

2. Optimera bilden för visning på webben

Bakgrunds-, Hero- och effektbilder

Herobilder är det första någon ser som besöker din hemsida. De ligger ofta utfallande och tar upp hela skärmen från kant till kant som en bakgrund. Bilden kombineras ofta med en text som ligger ovanpå och ibland även CTA-knappar (Call-to-action).

Olika datorer, skärmar, paddor och mobiler kommer i en uppsjö av storlekar. Här har bakgrundsbilder det tuffaste jobbet på hemsidan. I Snowfire jobbar vi responsivt dvs bilden minskas ned och anpassas för den yta den ska visas på. 

Utfallande bilder ska här både klara av att visas på stora ytor och skärmar men även visas i liten storlek i mobilen. Ration på dessa skärmar är olika och det behöver systemet ta hänsyn till här. Utfallande bilder beskärs från sidorna för att anpassas efter skärmarnas olika bredder. 

Fel bildformat för användningsområdet

En produktbild eller en personbild som är fotad på nära håll funkar ej att lägga upp i ett block optimerat för bakgrunds-/herobilder. Eftersom blocket är skapat för en utfallande bild. dvs visar hela bildens bredd, fungerar inte dimensionerna.

Formatet 2:3 (stående bild eller ett foto som är taget för nära) kan inte göra jobbet i en bildhållare skapad för bakgrunder såsom en 16:9 eller 21:9 format. 

Formatet 3:2 (Liggande bild eller ett foto som är taget för nära) kan inte göra jobbet i en bildhållare skapad för bakgrunder såsom ett 16:9 eller 21:9 format. Här kommer de personer som är utanför säkerhetsavståndet inte med i vissa format för mobiler och Ipads. 

Tips. 

• Lägg alltså inte upp bilder med personer eller detaljer som är placerade för långt ut på sidorna. Här blir varumärkeshöjande, livstilsbilder bäst.
• Planera din bild noga när du fotar för webben. Något som ser snyggt ut på en skärm kan se beskuret ut på en annan skärm.
• Var noga med att fota det mest relevanta i i bilden från ett längre avstånd så att det finns möjlighet till justeringar.
• Tänk på att lägga ett säkerhetsavstånd till främst sidornas kanter men bilden kan ibland även bli beskuret på höjden i vissa mobiler.
• Utfallande bilder behöver innehålla minst 1440 helst 1920pixlar på bredden för att du ska kunna justera i själva bilden.
• Formatet styr. Har du lagt upp ett långt formulär i ett block med en  bakgrundsbild är inte bara bredden utan höjden på bilden lika viktig för att bilden ska fungera.

Produktbilder och textförstärkande bilder

Vi läser en bild före en text. Rätt bild bredvid ett textstycke gör att vi förstår innehållet lättare. Dessa bilder är enkla att finjustera så att just det som är viktigt i själva bilden syns. Det kan vara en produktbild, en personbild, en illustration, ja här passar det mesta.

Mindre bilder såsom produkt- eller personbilder går att finjustera exakt. När bilden laddas upp blir den av default "fyll ut" välj visa hela bilden eller beskär för att finjustera ytterligare

Här är valet "beskär". Det går att välja exakt pixelstorlek (1). Vid val av justera bild (2) så går det att markera ut exakt den del i bilden som ska visas.

Välj rätt block som är optimerad för sin uppgift. Vill du visa en stor bild som visas i hela bredden och höjden (här i format 3:4) oavsett vilken skärm den visas på så välj vårt block "Bild" (här ovan). Bilden blir hela 1170 pixlar bred och du kan justera, beskära samt med en slider minska ned bilden i exakt pixlelstorlek, precis som du vill.

Logotyper och faviconer

Din logotype visar och stärker medvetandet om ditt företag. Det är oftast en bokstavskombination och/eller färgfigur. Logotyper görs i vektorformat så att det är skalbara men sparas sedan till ett format som fungerar på webben. Läs mer om bästa filformat för webben här.

Besökare på din hemsida kommer att omedvetet leta efter din logotype i vänsterhörn på din hemsida. Faviconer är små instanser av logotypen som bl a visas i webbläsarfönstrets flik.

Under utseende (1) så går det att ställa in logotypen. Klicka under allmänt (2) och dra eller hämta din logotype (3) och välj storlek (4). Spara.

Din bild är för liten i dimensioner och för lågupplöst för det block där du vill lägga bilden

Vi får bättre och bättre skärmar och med retinaskärmar är det även vanligt att bilder blir bäst om du lägger dem 2x (dubbel storlek för den bildhållare där du vill visa dem). Bilder som fanns på din gamla hemsida kan behöva bytas ut. Det går ofta inte att flytta över dem. Lägger du upp en bild som är för liten i pixelstorlek för att matcha bildhållaren i blocket, kan det lätt bli pixliga resultat.