Skriven av: Mika Dahlquist
Copywriter med webbredaktör-skills
Utsidan ger insidan en chans. Det visuella intrycket är avgörande när du vill nå ut till kunder via hemsidan och sociala medier. Tycker du att det är svårt att veta vilka bilder som passar samt optimera för rätt storlek och format? Häng kvar, här är den ultimata guiden till bilder på webben.
Dessa bilder behöver du till hemsidan
1. Omslagsbilden
Hero-bilden är en bred sektion som är det första besökaren ser när den kommer in på hemsidan. Den kallas också omslagsbild eller banner. Här brukar företagets slogan och värderbjudande stå, så att kunden snabbt får en uppfattning om vad det erbjuder.
Andra ”banners” som ligger brett över hela skärmen brukar sällskapas av en CTA-knapp. Som sektionen med de gröna bladen nedan.
2. Produktbilder
Produktbilder brukar oftast vara mindre och grupperas tillsammans i ett kluster, antingen i en kolumn om tre eller mer. Detta för att det brukar se snyggare ut att samla ihop liknande produkter, som ett galleri eller en kollektion.
3. Puff-bilder
Puff-bilder/bildelement är lite mindre bilder som ryms i en kolumn och täcker ungefär 1/2 eller 1/3 av skärmen i bredd, oftast en detaljerad bild eller stämningsbild. Porträttbilder brukar också räknas in här. Tänk på att höjden ska motsvara ungefär hälften av skärmen så att man inte behöver scrolla för att se hela. Du ser de ungefärliga proportionerna på bilderna här nedan.
4. Artikelbilder
När du skriver ett blogginlägg är det vanligt att välja en bild som är justerad i samma bredd som resten av texten. Så även detta blogginlägg.
5. Favicon
Den här pyttelilla bilden glömmer många men den är väl så viktig! Det är denna bild som dyker upp i sökresultatet på Google.
Vilket bildformat är bäst?
När det gäller bilder är JPEG det bästa formatet.
Png är bra vid mer komplexa illustrationer och loggor, samt när du behöver ha en transparent bakgrund.
Gif har hängt med länge, men funkar inte vid högupplösta kreationer utan vid små animationer.
Du ser vilket filformat bilden har genom att gå in i mappen den ligger i och högerklicka på filen i fråga.
Dessa bilder behöver du till sociala medier
Flödesbilden är den vanligaste bilden på Instagram. Den kan publiceras som en enstaka bild eller som en del av ett karusellinlägg – alltså en bildserie som användaren kan swipea fram.
Du behöver också välja en profilbild eller avatar som syns när användare söker efter ditt konto. Välj gärna något som sticker ut utan stökiga element i bakgrunden.
En annan viktig bild är omslagsbilden för dina Stories och Reels. Den ska helst ha en scrollstoppande text som placeras mitt på bilden. Den ska inte vara för nära marginalerna där det finns share och like-knappar i interfacet som täcker den.
De vanligaste bilderna på LinkedIn och Facebook är omslagsbilder som ligger i bredd tvärs över din användarprofil.
Vad vill du förmedla med bilderna?
Generellt passar bilder som speglar varumärket och passar in med övriga färger på hemsidan. Du vill ge ett proffsigt intryck och bli ihågkommen.
En dämpad färgpalett matchas bäst med sobra foton i toner av sepia eller liknande. Alternativt kan du bryta av en monokrom grafisk profil med färgstarka foton.
Andra föredrar att experimentera med olika färg-overlays för att uppnå en viss effekt. Satsa på rätt färgfilter eller färgton för att texten ovanpå ska synas ordentligt – här gäller det att jobba med kontraster!
Matcha text och bild, så att hemsidan ger ett enhetligt intryck. Skriver du om kaffe kanske du inte ska ha en bild på en tekopp. En hälsotext verkar inte så seriös om det finns en bild med cocktails och fest.
- Satsa på livsstilsfoton som resebilder, caféer, vackra hem och landskap. Även landmärken och symboliska figurer (en fyr eller tåg).
- Även foton av människor är bra, gärna när de använder din produkt eller tjänst. När vi ser ansikten knyter vi an och får en mer positiv upplevelse.
- Abstrakta bilder på flora och fauna, mat, figurer eller häftiga mönster sticker ut.
Passa också på att addera illustrationer, figurer och ikoner när du framhäver vissa textstycken i form av USP:ar och annan viktig information. Andra alternativ är diagram och infographics.
Gratis bilder online
Det finns en uppsjö av gratis bildkällor online.
Stock photos, är det OK? Ja, det funkar om du har begränsad budget och inte kan eller vill använda proffsbilder som är tagna av en fotograf.
De kan också vara ett komplement till bilder som är dina egna. I regel är det bättre att jobba med mer abstrakta miljöbilder än att ha med riktiga personer när det gäller stock photos. Risken är annars att personen som visas på din sajt kanske är med i en helt annan kontext, en som du inte vill förknippas med. Andra använder ju också stock photos – även dina konkurrenter.
Bildoptimering – SEO och kvalitet
De flesta bilder som levereras av fotograf och laddas hem är högupplösta. Det säkerställer att kvalitén är god och att bilderna är klara och tydliga. Om de är för små sträcks de ut och blir suddiga. Dock så behöver du ofta minska ner dem en smula när de ska användas på hemsidan.
Ändra bildstorlek
När du minskar storleken på bilden är det smart att göra det i exempelvis Photoshop eller Canva. Du kan också använda tinyjpg för att komprimera bilden något (göra den mindre). För stora bilder drar ner sidans laddtid vilket inte bara är trist för besökaren utan också påverkar rankingen på Google.
Många glömmer SEO-biten när de laddar upp bilder på hemsidan. Den aktuella sidans sökord ska finnas i bildfilen. Döp filen enligt nyckelordet och använd det i alt-texten.
Då säkerställer du att bilden kommer upp bildsöket, som också är avgörande för att driva trafik.
Lista över alla relevanta bildstorlekar
Bildstorlek hemsida
Hero – 1600 x 500
Puffbild – Max 1000 pixlar bred. Man brukar skilja mellan stående och landskapsbild.
Produktbilder/galleri – Runt 500 pixlar bred
Favicon – 16 x 16
Bildstorlek Facebook
Bildstorlek Instagram
Flödesbild: 1080 x 1080
Storybild: 1080 x 1920
Bildstorlek LinkedIn
Satsa på att lägga grunden för bildstorlek och visuell stil
Sådär! Då har du förhoppningsvis lite idéer och riktlinjer för att skapa ett visuellt mästerverk. Både Google och kunderna blir nöjda när bilderna är optimerade och matchar hemsidans texter. Om du vill få hjälp med att skapa hemsidan i sin helhet, är det hit du ska!