Artikel uppdaterad i juli 2018

Vi guidar dig igenom hela processen och går igenom allt från hur du väljer rätt filformat och motiv till hur du sökmotoroptimerar dina bilder. Allt för att du genom bilder ska nå bättre resultat på webben.

Börja med att välja rätt storlek och filformat för webben

När du jobbar med bilder på din hemsida är det viktigt att du väljer rätt storlek och filformat för att bilderna ska laddas snabbt och se bra ut.

Bildstorlek

Ladda aldrig upp en bild direkt från kameran till din hemsida – de blir för stora både i mått och filstorlek. Kolla upp hur bred din bild behöver vara för den plats den ska ligga på och skala om till den storleken, det finns ingen anledning att göra den större än nödvändigt.

Du kan skala om bilder i Photoshop eller andra bildbehandlingsprogram som du installerar på din dator. Det finns även några gratis bildredigeringsprogram på nätet, testa Photoshop Express Editor eller Pixlr. Ladda upp din bild, ändra storleken och spara på din dator. Många hemsidesverktyg skalar om bildstorleken automatiskt efter uppladdning, men räkna med att kvaliten ofta blir sämre då.

Filformat – JPEG, PNG eller GIF?

JPEG är det vanligaste formatet för bilder på webben och också det du bör använda oftast. Det komprimerar bilden på ett bra sätt, har många färger och fungerar överallt. PNG använder du om du behöver frilagd bakgrund, exempelvis för din logotyp. GIF används främst för animerade bilder (inte hela videos!)

Ladda upp och lägga in bilder på hemsidan

Beroende på vilken plattform din hemsida är byggd kan det se lite olika ut när du laddar upp och lägger in bilder. De flesta moderna verktyg har enkla möjligheter att ladda upp, skala om och placera bilder. Om inte, så bör du överväga att byta plattform direkt.

Vad ska du publicera för bilder?

Det kan vara svårt att välja vad man ska ha för bilder på hemsidan. Våra bästa tips är att använda bilder som är personliga, professionella och relevanta. Lägg tid på att få till riktigt bra bilder, även om det innebär att du behöver anlita en fotograf. Var självkritisk här och nöj dig inte med något du fotat med mobilkameran i dåligt ljus!

Personliga bilder

Ta egna bilder som visar produkter, anställda i äkta miljöer och kunder som är i full färd med att använda era tjänster. Med personliga bilder kan besökarna enklare tänka sig in i hur det är att vara kund och de får en känsla för företaget.

Professionella bilder

Om dina bilder på hemsidan är professionellt tagna och har en tanke bakom kommer besökarna få ett seriösare intryck av företaget. Lär dig att ta bra bilder (läs mer om bra bilder lite längre ner) eller anlita en fotograf. Det lönar sig, vi lovar.

Relevanta bilder

Det borde säga sig själv: lägg inte in en bild på en blomma på en sida om badrumsmattor, det hänger liksom inte ihop. Ändå stöter man allt för ofta på exempel där det har lagts in en bild ”bara för att den var lite fin”.

Placering av bilder

Genom att placera bilder på ett smart sätt blir din hemsida snyggare och besökarnas helhetsintryck förhöjs. Det kan vara en bra idé att ha en enhetlig struktur där exempelvis varje undersida har en bred bild i toppen och en mindre bild till höger i andra textstycket. Då känner man igen sig när man surfar runt.

Bilder kan också användas för att dela upp långa textstycken och göra dem mer lättlästa.

Här är några exempel på hur du kan använda placering av bilder för att strukturera upp innehållet på hemsidan på ett snyggt sätt.

Sökmotoroptimera dina bilder

Ja, du kan göra SEO-anpassningar i bilder också:

Välj ett smart filnamn

När du lägger in en bild från din digitalkamera i datorn är filnamnet ofta något i stil med DSC_2992419.jpg, ett namn som inte säger sökmotorerna någonting alls om vad bilden föreställer. Genom att döpa om filnamnet till exempelvis rosa-cykel.jpg berättar du vad bilden föreställer och utöver att förbättra de vanliga sökresultaten på Google ökar du chanserna att komma med i bildsök.

Som en bonus gör du det lättare för dig själv att hitta bilderna i efterhand, eller hur?

Sätt en alt-text och titel

Alt-text och titel är ytterligare ett sätt för dig att berätta för sökmotorerna vad bilden föreställer. Dessutom ger det synskadade en idé om vad för bilder sidan innehåller eftersom deras textläsare kan läsa upp dessa. I de flesta hemsidesverktyg finns möjlighet att sätta alt-text och titel på varje bild på ett enkelt sätt.

Alt-texten syns ingenstans för besökarna utan finns bara i koden medan titeln syns när man håller muspekaren över bilden.

Varför du ska använda egna bilder

Dina besökare märker oftast om du använder egna bilder istället för bilder köpta från en bildbank och de uppskattar din ansträngning. Det framstår som personligare och dessutom blir ni helt unika eftersom ingen annan använder samma bilder. Ditt företag ses också som mer kreativt. Egna bilder kostar inget (bara din tid), och du kan få dem precis som du själv vill.

Om du kör på bildbanksbilder (det är ok, det gör vi också med jämna mellanrum – som den stora bilden längst upp i det här inlägget), välj dem med omsorg.

Snabba fototips – så tar du bra bilder för webben

Slutligen kommer några snabba fototips som kan hjälpa dig att ta bättre bilder till din hemsida.

Motiv och komposition

Motivet bör vara relevant till produkten, tjänsten eller ditt varumärke och kompositionen enkel och tydlig utan onödiga bakgrundsdetaljer (exempelvis är produktbilder med vit bakgrund bra).

Läs också: Så tar du snygga produktbilder till din webshop

Exponering och färger

Använd om möjligt manuella inställningar så att du kan kontrollera ljus och färger i bilderna. Det finns många guider för det här både online och i diverse fotoböcker!

Tredjedelsregeln

Om du är osäker på hur du ska placera saker i bildrutan kan du alltid använda dig av tredjedelsregeln som gör gälla att viktiga objekt i bilden kan placeras längs med linjer i bildens tredjedelar. Exempelvis kan du i ett närbildsporträtt placera ögonen en tredjedel från toppen av bilden.

Framkalla känslor

Vårt sista tips är att försöka få din bild att framkalla känslor hos betraktaren. Glädje, medlidande, förvåning, trygghet – det finns många känslor som kan få besökarna mer involverade i innehållet på din hemsida. Vad vill du ge besökarna för känslor?

Har du läst del 1 i artikelserien om bilder?

I del 1 gick vi igenom de viktigaste fördelarna med att ha bra bilder på din hemsida. Vi täckte bland annat hur bilder kan få dina besökare att komma ihåg ditt budskap bättre, hur de kan skapa en känslomässig koppling till ditt varumärke och hur de kan uppmana till delning och spridning på sociala medier.

Läs del 1: Bilder på din hemsida del 1: Varför bra bilder ger resultat