Guide: Herobild - Upplösning, storlek, vad passar?
Välkommen till vår steg-för-steg guide för att förbättra hero-bilden på din startsida! Hero-bilden är ofta den första bilden som besökare ser när de landar på din sida, så det är viktigt att den ger ett bra och starkt första intryck. Vi förstår att det kan vara en utmaning att hitta balansen mellan att ha en intressegivande hero-bild samtidigt som andra delar av din hemsida förblir funktionella och lättanvända. Vår guide kommer att gå igenom stegen du behöver ta för att skapa en hero-bild som både är visuellt tilltalande samtidigt som du tar hänsyn till den tekniska aspekten.
Varför är en optimerad hero-bild viktig?
- Användarupplevelse: En tung eller o-optimerad bild kan leda till att din hemsida laddar långsamt, vilket kan påverka användarupplevelsen negativt. Besökare kan lämna sidan innan den har laddats klart - vilket kan leda till en högre avvisningsfrekvens.
- Varumärkesimage: Din hero-bild är en viktig del av din hemsidas första intryck på besökare. En professionellt utformad och anpassad hero-bild kan hjälpa till att skapa en positiv uppfattning och samt ett intresse av ditt varumärke och din hemsida.
- Konverteringar: Om din hemsida är utformad för att generera konverteringar, som försäljning eller registreringar, kan en väl utformad hero-bild öka konverteringsgraden. En tydlig och visuellt tilltalande bild med en tydliga CTA (Call To Action) för besökarens nästa steg eller ett registreringsformulär kan hjälpa till att sälja ditt varumärke och övertyga besökare att vidta åtgärder.
Lägg till en hero-bild steg-för-steg
När du ska lägga till en hero-bild på din hemsida finns det några saker att tänka på för att få det att se så bra ut som möjligt utan att funktionaliteten blir lidande. Här är några enkla steg som kan hjälpa dig att välja rätt bild på rätt sätt och få det att se professionellt ut.
Upplösning och komprimering
För att din hero-bild ska se bra ut är det viktigt att använda en högupplöst bild. Det betyder att bilden ska ha tillräckligt med pixlar för att inte bli suddig - pixlig på större skärmar.
En bild med en upplösning på minst 1920 x 1080 pixlar fungerar bra för en datorskärms hero-bild. I bildbanker kan du vanligtvis välja anpassat mått vid nedladdning på sidor, exempelvis: https://unsplash.com/. Att använda högre upplösning än vad som behövs för det specifika ändamålet kan resultera i onödigt långa laddtider och ta upp mer plats än vad som egentligen behövs.
Därför är det är viktigt att komprimera bilder innan de läggs in på en hemsida för att undvika långsam laddningstid och spara utrymme. Det är möjligt att behålla en hög bildkvalitet samtidigt som man minskar bildens filstorlek genom att välja en lämplig komprimeringsnivå och filformat, detta görs snabbt och enkelt på sidor som exempelvis: https://tinypng.com/.
Rekommenderade bildstorlekar
Som tidigare nämnt är en rekommenderad storlek för en hero-bild på en desktop-skärm är runt 1920 x 1080 pixlar och för mobila enheter (smartphones och surfplattor) runt 800 x 1200 pixlar - men storleken som bilden sedan presenteras i beror på användarens skärmstorlek. Eftersom det ständigt dyker upp nya enheter med varierande skärmstorlekar på marknaden, så är det smart att välja/skapa en responsiv hemsida för att säkerställa en optimal användarupplevelse för dina besökare - oavsett skärmstorlek.
Responsiv hemsida
Är din hemsida precis som Ashop responsiv behöver du vanligtvis endast bry dig om desktopbilden. En responsiv hemsida är en webbsida som är utformad för att anpassa sig automatiskt till olika skärmstorlekar och enheter, så att webbsidan ser bra ut och fungerar på samtliga enheter, oavsett om besökaren använder dator, smartphone eller surfplatta.
Men beroende på hur den responsiva hemsidan skalar bilden i mindre enheter så är det alltid viktigt att testa och anpassa som vi skriver om nedan.
Beskär bilden om det behövs
När du väljer en hero-bild kan det hända att dess proportioner eller motiv inte passar in i det utrymme där du vill använda den. I sådana fall kan du klippa eller beskära bilden för att anpassa den till det utrymme du vill fylla, vilket kan ge en mer balanserad och estetiskt tilltalande layout.Det är dock viktigt att se till att det viktigaste innehållet och budskapet i bilden fortfarande är synligt efter beskärningen. Så tänk på att inte klippa bilden för mycket - välj då istället en annan bild.Det kan också vara så beroende på ditt designtema att bilden beskärs vid visning beroende på besökarens skärmbredd.
Matcha ditt varumärke
Det är viktigt att använda bilder som matchar din grafiska profil och stämmer överens med ditt varumärke. Det kan vara färgschemat, stilen eller motivet på bilden som gör det.
Om din hemsida har en minimalistisk design kanske du vill använda en avskalad bild med rena linjer. Om din hemsida har en varm och livlig känsla kanske du vill använda en bild med ett talande och tydliga färgpalett och många detaljer t.ex.
Undvik text i bild
Ha som grundregel att aldrig ha text i bilden. Istället finns det funktioner som låter dig lägga text ovanpå bilden istället. Detta är särskilt viktigt eftersom text i bild kan inte läsas av skärmläsare som synskadade använder - och kan heller inte läsas av Google.
Att använda text i bild som en genväg är därför en dålig idé, och det är alltid bättre att tänka ett varv extra. Utöver detta finns det även risk att texten beskärs bort eller inte syns på mobila enheter även om plattformen är responsiv, vilket kan påverka användarupplevelsen negativt. Så var försiktig när du inkluderar text i dina bilder och försök alltid att hitta alternativa sätt att kommunicera ditt budskap på.
Testa och anpassa
När du har valt en bild och placerat den på din hemsida, så är det viktigt att testa den på olika enheter och i olika webbläsare. Detta hjälper dig att se om bilden ser bra ut samt laddar snabbt på samtliga enheter.
Om bilden inte ser bra ut på vissa enheter eller webbläsare kan du behöva göra några anpassningar. Du kan testa att justera storleken eller upplösningen på bilden eller välja en annan bild som fungerar bättre.
Skippa bildspel
En enkel hero-bild är alltid ett bättre alternativ på en e-handels startsidan än ett bildspel med flera bilder som snurrar (även kallat karusell). Detta på grund av flera skäl:
- För det första konverterar en karusell dåligt eftersom besökarna ofta bara ser den första bilden och inte scrollar vidare för att titta på resten av bilderna.
- För det andra finns det argument om att en karusell är irriterande och distraherande, särskilt om den snurrar för fort eller om besökaren försöker läsa om det erbjudandet eller kampanjen som presenteras.
- För det tredje kan det vara svårt att skapa en karusell som fungerar på alla enheter och bildstorlekar. Istället kan det vara bättre att använda flera ytor på startsidan samt använda banners på kategorisidor och produktsidor. Genom att sprida ut kampanjinnehåll och budskap på sajten och rikta det mot specifika målgrupper kan man få mer effektiv exponering - än att ha allt på startsidan.
Övriga punkter att tänka på
Det är viktigt att ha i åtanke hur bilden påverkar laddningstiden på din hemsida. En trögladdad hemsida är en av de största bovarna för en negativ användarupplevelse. Du kan optimera bilden för webben genom att minska filstorleken eller använda komprimeringsverktyg för att behålla kvaliteten samtidigt som filstorleken minskas.
Och kom ihåg: Hero-bilden är en viktig del av din hemsidas första intryck på besökare. En professionell och väl anpassad bild kan hjälpa till att skapa en positiv uppfattning av ditt varumärke och din hemsida, så ta dig tid att välja en bild som passar din grafiska profil och dina behov.
Kontakta oss för mer information - eller hjälp men liknande problematik!