Foto: Anne Kring
Hermed et par webdesigner-tip til store topfotos til dit website. Såkaldte hero-fotos. Det vil sige billeder, der kan bruges som billedet herover af psykoterapeut Karen Østergaard fra livogessens.dk.
Uanset du selv fotograferer eller du hyrer en professionel fotograf, er det surt at bruge en masse tid eller penge og senere opdage, at dine ellers fine billeder på det nærmeste er ubrugelige til web. Og det sker desværre ofte. Selv for dygtige fotografer.
Skaf et godt foto til toppen af din forside
Mange websites har en markant foto i toppen af forsiden. Ofte med tekst ovenpå.
Vil du have sådan et billede - uanset det er et portræt af dig eller et stemningsbillede - skal det opfylde en række krav. Ellers kan det ikke bruges til formålet.
I denne guide vil jeg bruge fire forskellige billeder som eksempler.
Tre af dem vil være svære at bruge som baggrundsbillede i toppen af en side med tekst ovenpå.
Kan du regne ud, hvilke af de fire billeder herunder, der er velegnede og uegnede til formålet?
- Billedet i toppen - det blålige portrætfoto - er det mest velegnede, hvis det skal bruges som baggrundsbillede med tekst ovenpå.
- Billedet af solnedgang (eller opgang) er svært at bruge, fordi der er for lidt luft omkring personen, som ofte vil forsvinde ud af billedet.
- Billedet af fotografen er ikke helt umuligt. Særligt ikke hvis man lægger en farvet boks ovenpå billedet, under teksten.
- Billedet af de seks personer er for uroligt og rodet. Og flere af personerne vil ofte forsvinde ud af billedet.
Tips du kan tage med til fotografen
Først får du nogle tips, som jeg vil foreslå dig at tage med til fotografen, der skal tage billeder for dig. Du kan ikke forvente, at fotografen uden videre ved, hvilke billedformater, der er velegnde til netop dit website.
Bed om billeder i 16:9 format
At billeder er i 16:9 format vil sige, at hvis billederne eksempelvis er:
- 1920 pixels brede
- 1080 pixels høje.
16:9 formatet er særligt velegnet i moderne, mobilvenligt webdesign.
Billederne ser sædvanligvis fine ud i det format. Uanset de ses på lille skærm eller stor.
Det er ikke mindst en fordel, at billedet aldrig bliver så højt, at besøgende kun kan se billede og ikke eksempelvis den tekst, der er under billedet.
Læs mere her om høje billeder vs. brede.
Herunder kan du se et eksempel på, hvorfor alle billeder bør have samme format. Altså samme bredde og samme højde. Har de forskellig højde, bliver de sværere at bruge ved siden af hinanden.
Her har billederne ikke samme højde og kan derfor ikke placeres ved siden af hinanden uden at stå skævt.
Og ja, det gælder også for almindelige portrætfotos, at brede er nemmere at bruge på moderne websites end høje.
Få derfor som udgangspunkt taget brede portrætfotos - altså i 16:9 format
Det er nemt at skære det væk fra billedet, du ikke vil have med. Eksempelvis kan en væg eller anden baggrund altid skæres væk.
Hvis dine billeder ligner pasfotos (tager på højden), er de ufleksible og dermed svære at bruge i moderne webdesign.
Responsivt design og billeder med elastik
En af de store tekniske udfordringer til billeder, der skal bruges som baggrund under tekst er, at moderne webdesign er responsivt.
Det vil sige, at indholdet ændrer udseende afhængig af, hvor bred skærmen er hos den, der kigger på siden.
En del af billedet vil derfor til tider forsvinde fra skærmen - afhængig af, om den besøgende har en tablet på 9″, en lille laptop på 15″ eller en stor arbejdsskærm på 27″.
Herunder kan du se de fire billeder brugt som baggrundsbillede med tekst ovenpå.
De første fire screendumps er taget på en stor skærm, hvor billederne fungerer ok.
De næste fire screendumps er taget på noget mindre skærm, hvor browseren er gjort smallere - og så dur kun to af billederne.
Herunder kan du se de samme fire billeder blive vist på en smallere skærm.
Læg mærke til, at en del af billedets yderkanter forsvinder.
Hvad er godt og skidt ved de fire billeder
Lad mig hurtigt gennemgå fordele og ulemper ved de fire billeder - hvis de skal bruges i toppen af en side med tekst ovenpå.
Det blå portrætfoto herunder er velegnet.
En del af kvindens ansigt vil forsvinde på små skærme, men det gør ikke så meget, fordi billedet i forvejen er kraftigt beskåret. Billedet udmærker sig i øvrigt ved at have en rolig og ensfarvet baggrund.
Det varme foto med kvinden i højre side er uegnet.
Det vil i mange tilfælde blive beskåret helt uhensigtsmæssigt.
Skal det kunne bruges som baggrundsfoto under tekst, skal der være “noget af tage af” i siderne.
Kvinden skal placeres lidt tættere på midten, så der bliver luft over hende og bag hende.
Billedet af fotografen er ikke helt umuligt. Der er luft omkring hende.
Hun kunne dog med fordel være placeret i højre side og kigge mod venstre - mod den tekst, vi gerne vil have besøgende til at læse.
Og så er baggrunden så urolig, at det er svært at placere tekst ovenpå uden at den bliver svær at læse.
De seks personer i billedet er drysset over hele billedfladen.
Der er ikke nok plads til en tekst.
Det er ikke velegnet som baggrundsbillede i toppen af en side - ikke hvis der skal tekst oven på billedet.
Tænk bredt og tænk i farver
Farverne på Karens website er i øvrigt valgt direkte fra fotoet. Farvekoderne, som er genbrugt i webdesignet, er valgt ved at bruge værktøjet Adobe Color
Det er ofte en god metode til at finde en fin farveskala. Særligt hvis du på forhånd - før besøget hos fotografen - overvejer farverne på tøj og omgivelser.
