Jag är intresserad av:

Lämna dina uppgifter så ringer vi dig:

Eller ring oss:
0470 - 70 36 80

30 april 2014

Bilder på din hemsida Del 2: Så når du framgång med hjälp av bilder

Simon Östemar - Webmaster på Smelink.se Simon Östemar
Webmaster

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.

Bilder på din hemsida Del 2

Börja med att välja 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

En hemsida är ofta runt 950 pixlar bred jämfört med en bild från en digitalkamera som är runt 3000 pixlar. För att få så små bildfiler som möjligt (laddar snabbare) bör du därför se till att skala ner bildernas storlek före uppladdning. Kolla upp hur brett fältet där bilden ska ligga är och skala om bilden till den storleken.

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.

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 sällan nu för tiden och fungerar inte i alla enheter och webbläsare. Vill du skapa små bildsekvenser, som en kort lågupplöst video utan ljud, är GIF ett alternativ. Dock är kvaliteten usel och vår rekommendation är att istället publicera film på hemsidan.

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.

Jobbar du i HTML-kod gör du så här:

<img src="bildnamn.jpg" alt="Bildtext" height="300" width="200">

Där src är bildens källa, alt är bildens namn och width och height så klart är bredd och höjd.

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.

Personliga bilder på din hemsida

Wilderness Life har personliga bilder som passar perfekt med deras verksamhet och dessutom är bra fotade. De är både personliga, professionella och relevanta.

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 om du har råd, hyr in en fotograf. Det lönar sig.

Relevanta 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 om du har råd, hyr in en fotograf. Det lönar sig.

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.

Placering av bilder på hemsidan

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

Det är enkelt att sökmotoroptimera dina bilder för att förbättra hemsidans positioner på Google.

Välj ett smart filnamn

Rosa cykel

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.
Bildkälla: Giant Bicycles

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.

Jobbar du i HTML-kod gör du så här:

<img src="rosa-cykel.jpg" alt="Rosa cykel" title="Rosa cykel" height="300" width="200">

Alt-texten syns ingenstans för besökarna utan finns bara i koden medan titeln syns när man håller muspekaren över bilden. Testa själv på den rosa cykeln till höger.

Varför du ska använda egna bilder

Dina besökare märker 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 mer professionellt 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 slipper oroa dig för eventuella Copyright-problem.

Ta dig tid att ta egna bra bilder så kommer resultaten från hemsidan förbättras.

Bilder från bildbank

Det är uppenbart när bilder från en bildbank har använts på hemsidan.

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).

Exponering och färger

Har du en digitalkamera finns det oftast möjlighet att över- eller underexponera din bild vilket du kan göra i de fall då kameran inte gör ett bra jobb med att mäta hur ljus eller mörk den ska vara. Bilden ser mycket bättre ut med rätt exponering. Se också till att färgerna på bilden är fina.

Tredjedelsregeln

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.
Bildkälla: Phototechique.com

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?

Tips på hur du kan jobba med bilder

Lämna dina uppgifter så ringer vi dig och pratar om hur du kan jobba med bilder på din webbplats:

Ny hemsida?

Öka din försäljning och få fler kunder. Låt oss skapa din nya hemsida.

Läs mer

Starta webshop?

Sälj dina produkter online genom e-handel. Snabbt, enkelt och säkert.

Läs mer

Prenumerera på vårt nyhetsbrev:

Lämna följande fält tomt.