Så väljer du rätt bilder till din webbplats

Börja med bildens uppgift

Fråga dig innan du väljer: ”Vad ska besökaren förstå eller känna i den här delen av sidan?”

En bild på startsidan kan presentera företaget. En bild som presenterar en tjänst kan visa arbetet eller resultatet. En teambild hjälper kunderna att känna igen personerna de kommer att träffa. Välj en bild som stödjer syftet.

Skriv en mening om behovet innan du letar: ”Bilden ska visa ett litet badrum som vi har renoverat och lämna plats för rubriken till vänster.” En tydlig beskrivning gör det lättare att välja bort fina bilder som inte passar sidan.

Jämför alternativen med tre frågor: Vad berättar bilden? Är den informationen användbar här? Fungerar budskapet också i det utrymme som finns? Om bilden varken tillför information eller rätt känsla kan avsnittet fungera bättre med enbart text.

Välj en huvudbild som passar företaget

Det stora inledande området, ofta kallat hero, är det första många besökare ser. Bilden ska samspela med rubriken, inte konkurrera med den.

Ett renoveringsföretag kan visa ett färdigt rum eller en hantverkare i arbete. En fysioterapimottagning kan använda en naturlig bild från ett besök eller en övning. Ett lokalt café kan visa lokalen eller en igenkännbar maträtt.

Lämna tillräckligt med lugn yta för rubrik och knappar. Om bilden drar så mycket uppmärksamhet att erbjudandet blir otydligt, välj en enklare bild.

Bedöm bilden i sidans riktiga layout. Ett foto som fungerar fint för sig kan ha en rörig bakgrund precis där rubriken ska stå. Lägg rubrik och knapp som text på sidan i stället för att baka in dem i bilden, så att de kan anpassas till layouten.

Exempel: tre bilder till samma startsida

Tänk dig ett renoveringsföretag med rubriken ”Badrumsrenoveringar för små hem”. Företaget väljer mellan tre foton:

• Ett välgjort bildbanksfoto av ett stort lyxigt badrum. Ljuset är fint, men rummet motsvarar inte de små utrymmen företaget vill visa. Bilden kan skapa fel förväntningar på arbetet.
• Ett foto av ett badrum som företaget har renoverat, med snäv beskärning och synlig oreda. Motivet passar, men planlösningen är svår att förstå. Prova en annan beskärning eller ett annat foto från samma projekt.
• Ett tydligt foto av ett färdigt litet badrum. Förvaring, dusch och tillgänglig yta syns väl. Om det också finns plats för rubriken är detta det bästa alternativet för just den sidan.

Om duschen försvinner när den tredje bilden beskärs för mobil, gör en separat mobilbeskärning eller flytta texten bredvid bilden. Motivet, budskapet och den slutliga layouten behöver bedömas tillsammans.

Visa tjänsten eller resultatet

Tjänstebilder gör mest nytta när de hjälper besökaren att föreställa sig arbetet. En rörmokare kan visa en färdig installation eller en tekniker hemma hos en kund. En fotograf kan visa ett verkligt arbetsprov. Det berättar mer än ett allmänt foto av någon vid en bärbar dator.

Välj en bild som svarar på en fråga kunden troligen har. Ett färdigt rum visar resultatet, en närbild en fog eller ytfinish och en arbetsbild en del av processen. Vyerna har olika uppgifter: välj efter vad avsnittet ska förklara.

Lägg till en kort bildtext som beskriver projektet och detaljen att lägga märke till. ”Platsbyggd förvaring under snedtak” säger mer än ”Ännu en nöjd kund”. Beskriv bara vad projektet faktiskt visar och var konkret med påståenden om kvalitet eller resultat.

Använd naturliga bilder av det riktiga teamet

En teambild kan få ett litet företag att kännas mer tillgängligt om den visar dem kunderna faktiskt möter. En välbekant arbetsplats, naturliga uttryck och avslappnade poser känns oftast mer övertygande än ett alltför arrangerat gruppfoto.

Håll beskärning och bakgrund likartade för individuella porträtt. Använd aktuella foton som speglar den service kunderna kan förvänta sig.

Namn och roll bredvid porträttet kopplar ansiktet till personen som hanterar förfrågan eller besöket. Ett enkelt, välbelyst porträtt kan räcka; en omfattande fotografering behövs inte. Be personerna på bilden om tillstånd före publicering och undvik att kunder eller privata uppgifter råkar synas i bakgrunden.

Välj bloggbilder som passar artikeln

En bloggbild ska göra ämnet tydligt, inte bara fylla en yta. I en artikel om färgval kan ett rum med ett tydligt färgexempel fungera bättre än någon som håller en pensel.

Ett enkelt diagram, ett verkligt exempel eller ett foto av ditt arbete kan vara mer relevant än en bildbanksbild. Anpassa bildtypen till förklaringen: en jämförelse kan behöva två exempel bredvid varandra, en instruktion en skärmbild från det aktuella steget. En dekorativ omslagsbild kan introducera ämnet men ersätter inte exempel som behövs för att förstå instruktionerna.

Kontrollera beskärningen på dator och mobil

En bred bild kan se helt annorlunda ut på en telefon. Webbläsaren kan beskära sidorna så att en person, produkt eller viktig detalj nära kanten försvinner.

Förhandsgranska bilden i den storlek den får på sidan. Huvudmotivet ska synas på både dator och mobil. Om text ligger ovanpå bilden, lämna en lugn yta bakom den för läsbarhetens skull. Finns ingen lämplig yta, placera texten bredvid.

1. Lägg bilden i det riktiga avsnittet. Ta med slutlig rubrik, knapp och omgivande text i stället för att bedöma fotot ensamt.
2. Kontrollera sidans layout i en bred och en smal vy. Leta efter beskurna ansikten, saknade produktdetaljer och text över röriga bildpartier.
3. Justera beskärningen eller motivets position. Om redigeraren har en fokuspunkt, flytta den mot den viktiga detaljen och förhandsgranska igen.
4. Kontrollera sidan på en telefon. Bildens betydelse och viktiga etiketter ska vara tydliga i den verkliga visningsstorleken.

Om samma beskärning inte håller motivet tydligt i båda storlekarna kan webbplatsen behöva olika utsnitt för olika skärmar. MDN:s guide till responsiva bilder förklarar lösningen, som kallas art direction, för den som bygger sidan.

Använd bildbanksbilder med eftertanke

Bildbanksfoton kan hjälpa när du saknar ett lämpligt eget foto. Fråga före valet:

• Har bilden en tydlig koppling till företaget eller tjänsten?
• Ser den naturlig och trovärdig ut?
• Skulle samma foto kunna finnas på nästan vilken konkurrents webbplats som helst?

Om bilden känns allmän, leta efter något mer specifikt eller använd ett riktigt foto av ditt arbete, produkter, lokaler eller team. Egna foton kan hjälpa besökaren att förstå vad som väntar.

En bildbanksbild kan illustrera ett allmänt ämne eller skapa stämning. Den passar sämre när bilden ska visa ditt faktiska team, dina lokaler eller utförda arbeten. Presentera den inte som bevis på ett projekt du har gjort. En relevant bildbanksbild kan ändå vara bättre än ett eget foto som är för mörkt, distraherande eller otydligt för sin uppgift.

Skapa ett enhetligt bildspråk på webbplatsen

Bilder från olika källor kan ändå passa ihop. Leta efter något gemensamt, till exempel naturligt ljus, liknande färgskala eller en enhetlig fotografisk stil.

Du behöver inte behandla alla foton likadant. Sikta på en sammanhängande sida där varje bild passar i sitt avsnitt.

Börja med två eller tre riktlinjer: liknande beskärning för porträtt, samma utsnittstyp för bloggomslag och naturligt ljus för projektbilder. Titta på bilderna tillsammans på sidan. Byt ut bilden som avviker innan du lägger ett kraftigt filter över hela samlingen.

Kort checklista före publicering

• Du kan förklara vad bilden tillför avsnittet.
• Den återger företaget, ämnet eller exemplet korrekt.
• Huvudmotivet syns i den faktiska dator- och mobillayouten.
• Text och knappar är läsbara, och viktig information finns även som text på sidan.
• Ljus, beskärning eller färger passar de omgivande bilderna.
• Du har kontrollerat användningstillstånd och eventuell obligatorisk käll- eller fotografangivelse.

Förbered de valda bilderna för webbplatsen

När du har valt bilderna hjälper våra guider dig att välja lämpliga bildstorlekar, ändra storlek utan förvrängning och skriva användbara alt-texter och filnamn.

Tänk också på hur informationen når någon som inte kan se bilden. Bilder som förmedlar information behöver en lämplig textbeskrivning; rent dekorativa bilder har vanligtvis tom alt-text. W3C:s bildguide förklarar hur bildens syfte avgör valet.