Tag en hjemmeside, der mistede dig i de første sekunder, og scroll tilbage til toppen. Der er stor chance for, at billederne havde noget med det at gøre. Et stockfoto af smilende fremmede, der slet ikke ligner dem, virksomheden faktisk hjælper. Et hovedbillede, der er så uklart, at det kunne høre til en hvilken som helst virksomhed i en hvilken som helst branche. Eller slet ingen billeder, så siden virker nøgen og uferdig. Billeder på en hjemmeside er ikke pynt. De er kommunikation. Denne artikel viser, hvad billeder på en hjemmeside egentlig gør, hvordan du vælger de rigtige, hvor de hører til på hver side, og hvad der sker, når du gør det forkert.
Besøgende bearbejder billeder hurtigere end ord. Før nogen læser din overskrift, har hjernen allerede dannet et førstehåndsindtryk ud fra det visuelle. Det betyder, at dine billeder fører et argument for din virksomhed, før du selv når at føre et. Spørgsmålet er, om det er det argument, du vil føre.
Hvad gør billeder på en hjemmeside egentlig?
Hvert billede på din hjemmeside fortæller en besøgende noget. Hovedbilledet på din forside siger “det er den slags virksomhed, vi er, og det er dem, vi er til for”. Fotoet på din Om os-side siger “her er rigtige mennesker”. Produktbilledet på din ydelsesside siger “det her får du, når du arbejder med os”.
Når de signaler er klare og relevante, føler de besøgende, at de kan finde rundt. Når de er uklare eller generiske, føler de besøgende ingenting, og det er det værste udfald. En besøgende, der ikke føler noget, har ingen grund til at læse videre.
Billeder styrer også, hvor blikket går hen. Det er kernen i visuelt hierarki på en side. Et godt placeret billede trækker opmærksomheden hen mod det afsnit, der har betydning. Et dårligt placeret billede deler opmærksomheden og gør den besøgende usikker på, hvor de skal kigge næste gang. Hvert billede skal tjene sin plads ved at hjælpe den besøgende i den rigtige retning.
Rigtige fotos eller stockfotos: Har det betydning?
Ja. Mere, end de fleste forventer.
De besøgende er bedre til at spotte stockfotos, end de var for fem år siden. Det perfekt oplyste mødelokale med fire fagfolk fra forskellige baggrunde, der nikker til en bærbar. Håndtrykket foran en skyline. Den smilende kvinde med en kaffekop. De billeder er så almindelige, at de besøgende har udviklet en slags visuel immunitet over for dem. De ser dem og registrerer ingenting.
Rigtige fotos gør det modsatte. Et foto af din egen butiksfacade, dit eget team, dit eget færdige arbejde. De billeder er specifikke for dig og kun dig. En besøgende, der ser dem, får bevis for, at der står en rigtig virksomhed bag hjemmesiden, og det er noget af det mest værdifulde, et billede kan fortælle. Selv et mobilfoto taget i godt lys virker ofte bedre end et poleret stockfoto, fordi det er ægte.
Når det er sagt, har stockfotos deres plads. Til blogartikler, til at illustrere abstrakte begreber og til at fylde sekundære billedpladser, hvor det konkrete har mindre betydning, gør et velvalgt stockfoto det godt nok. Reglen er: Brug rigtige fotos, hvor tilliden er på spil, og brug stockfotos, hvor billedet kun understøtter indholdet og ikke fremsætter en påstand om din virksomhed.
Hvordan vælger du det rigtige billede til hver side?
Før du leder efter et billede, så spørg, hvilket job det skal have på netop den side.
På din forsideskal hovedbilledet fortælle, hvad du laver, og hvem du gør det for, før nogen har læst et ord. Hvis en besøgende kunne se på dit hovedbillede alene og ikke have nogen idé om, hvilken branche du er i, gør billedet ikke sit job.
På din Om os-sideskal billedet være personligt. Vis menneskerne. Vis stedet. Vis noget, der får virksomheden til at føles menneskelig og konkret i stedet for firmaagtig og anonym.
På en ydelses- eller produktside skal du vise resultatet. Et før og efter til en renoveringsvirksomhed. Et skærmbillede af dashboardet til et softwareværktøj. Et foto af den færdige ret til en cateringvirksomhed. Billeder af resultatet overbeviser mere end billeder af processen, fordi de svarer på det spørgsmål, en besøgende faktisk stiller: Hvad har jeg, når det her er færdigt?
Når du kender jobbet, så find billedet. Ikke omvendt.
Hvad får et billede til at virke imod dig?
Irrelevans
Et billede, der ikke har noget konkret at sige om din virksomhed, din ydelse eller din kunde, fortæller den besøgende, at ingen har tænkt nøje over hjemmesidens visuelle oplevelse. Det indtryk hænger fast.
Mismatch
Hvis din tekst er varm og samtaleagtig, men dine billeder er kolde og firmaagtige, virker siden uens. De besøgende fornemmer den dissonans, selv om de ikke kan sætte ord på den. Billedernes stemning og tekstens stemning skal passe sammen.
Lang indlæsningstid
Store, ukomprimerede billeder er den allermest almindelige grund til, at hjemmesider indlæses langsomt. En side, der tager mere end tre sekunder at indlæse på en telefon, mister en betydelig del af sine besøgende, før noget er set. Alle billeder, du uploader, skal komprimeres til nettet. De fleste hjemmesidesystemer klarer noget af det automatisk, men det er værd at vide, hvad du uploader. Se, hvordan hjemmesidens hastighed påvirker de besøgende og placeringen i søgning, for at få det fulde billede.
Manglende alt-tekst
Hvert billede på din hjemmeside skal have en kort beskrivelse af, hvad det viser, skrevet i feltet til alt-tekst. Det har betydning af to grunde. Besøgende, der bruger skærmlæsere, er afhængige af alt-teksten for at forstå, hvad et billede indeholder. Søgemaskinerne bruger alt-teksten til at indeksere billeder. Springer du den over, mister du hurtigt både tilgængelighed og SEO-værdi.
Hvor skal billederne placeres på dine sider?
Der findes ingen generel regel for placering af billeder, men nogle mønstre virker konsekvent.
Sæt dit stærkeste billede, hvor de besøgende kigger først. På de fleste sider er det den øverste sektion over folden. Hvis en besøgende scroller ned, før de beslutter at læse, fanger den anden billedplads et sted midt på siden dem midt i scrollet. Et tredje billede nær bunden af en lang side fanger de besøgende igen, der har læst det meste af vejen.
Brug billeder til at bryde lange tekststykker op, men kun når billedet tilføjer noget. Et billede, der illustrerer det, afsnittet ved siden af siger, gør et arbejde. Et billede, der er sat ind, fordi sektionen føltes for lang, er fyld, og de besøgende kan mærke det.
På mobil ændrer billedernes placering sig, fordi skærmen er smal, og billederne stables lodret. Et billede, der står ved siden af teksten på computer, kommer over eller under den på mobil. Test, hvordan hver side ser ud på en telefon, og tjek, at billedet stadig giver mening på sin nye plads. Det er en del af at sikre, at din hjemmeside følger responsivt design på alle sider.
Hvilket filformat skal dine billeder have?
Den korte version:
- JPEG til fotografier. Lille filstørrelse, høj kvalitet, virker overalt.
- PNG til logoer, ikoner og alt med gennemsigtig baggrund eller skarp tekst.
- WebP til begge dele, hvis dit system understøtter det. Det giver mindre filer end JPEG og PNG ved samme kvalitet. De fleste moderne browsere håndterer WebP uden problemer.
- SVG til ikoner og enkle illustrationer. Skalerer perfekt til enhver størrelse med meget små filer.
Til filstørrelser er målet under 200 kilobyte til standardbilleder på siderne. Hovedbilleder kan gå op til omkring 400 kilobyte. Alt, der er større, skal komprimeres, før du uploader det. Et foto på fem megabyte fra din telefon hører ikke hjemme på en hjemmeside.
Hvad er alt-tekst, og hvorfor skal hvert billede have den?
Alt-tekst er en kort skrevet beskrivelse, der hører til et billede. Den står i billedets tag på siden, usynlig for seende besøgende, men læst af skærmlæsere og søgemaskiner. Begge har brug for den for at forstå, hvad dine billeder indeholder.
Til tilgængelighed er alt-tekst den måde, besøgende med skærmlæsere oplever billeder på din hjemmeside. Uden den hører de besøgende ingenting, når billedet indlæses, og så mangler der noget af det, du ville sige. Til SEO kan søgemaskinerne ikke se billeder, som mennesker gør. Alt-tekst er den måde, de forstår, hvad et billede viser, og om det er relevant for den side, det understøtter.
At skrive god alt-tekst betyder at beskrive det, der faktisk er på billedet, konkret og enkelt. Et foto af et færdigt køkken efter renovering får alt-tekst som “hvidt shaker-køkken med marmorbordplader efter renovering” frem for “køkkenfoto” eller “billede1”. Passer dit søgeord naturligt ind i beskrivelsen, så tag det med. Men skriv først og fremmest en beskrivelse. Alt-tekst, der kun er der for at gentage søgeord, fejler begge formål.
Hvert billede, du uploader, skal have alt-tekst skrevet, før siden går live. Det tager under et minut pr. billede og har betydning både for, hvem der kan få adgang til dit indhold, og for, hvordan dine sider rangerer.
Sådan hjælper WEMASY med billeder
WEMASYs hjemmesidebygger har billedblokke, som du kan tilføje til enhver sektion på en side. Du uploader direkte i hjemmesidebyggeren, placerer og ændrer størrelsen uden at røre ved kode og tilføjer alt-tekst i samme trin. Billeder bliver automatisk vist responsivt, så de tilpasser sig alle skærmstørrelser, uden at du skal lave separate udgaver til computer og mobil.
Sektioner i WEMASY understøtter billeder ved siden af tekst i fleksible kolonnelayouts eller som baggrunde i fuld bredde til sektioner, hvor et stærkt visuelt udtryk sætter tonen. Uanset hvad bliver billedet knyttet til det indhold, det understøtter, i stedet for at hænge løst i layoutet.
Se, hvad der er med, hos WEMASY hjemmesidebyggeren eller se planerne på siden Priser.
Ofte stillede spørgsmål om billeder på hjemmesider
Har jeg brug for professionelle fotos til min hjemmeside?
Professionelle fotos gør en reel forskel på de vigtigste sider, især din forside og din Om os-side, hvor tilliden bliver skabt. Til sekundære billeder, blogartikler og understøttende visuelt materiale fungerer et godt belyst foto taget med en moderne telefon fint. Det vigtigste er, at billedet er ægte og relevant for din virksomhed, ikke at en professionel har taget det. Med WEMASYs hjemmesidebyggerkan du sætte det op direkte på din hjemmeside.
Hvor mange billeder skal en forside have?
Nok til at understøtte sektionerne, ikke så mange, at siden virker rodet eller indlæses langsomt. Et stærkt hovedbillede, et eller to billeder i sidens midte og eventuelt et foto af teamet eller arbejdspladsen længere nede er en rimelig opbygning for de fleste små virksomheders forsider. Hvert billede skal tjene sin plads i stedet for at fylde.
Må jeg bruge billeder fra stockfoto-sider på min hjemmeside?
Ja, på nogle betingelser. Stockfoto-sider tilbyder billeder under licenser, der tillader kommerciel brug, men tjek vilkårene for hvert enkelt billede, før du bruger det. Den praktiske begrænsning er, at billederne findes på mange andre hjemmesider, så brug dem til understøttende og sekundære billedpladser frem for som dit vigtigste visuelle udtryk på sider, hvor tillid betyder mest, som din forside eller Om os-side.
Hvilken størrelse skal mine billeder have, når jeg uploader dem til min hjemmeside?
Komprimér, før du uploader. Målet er under 200 kilobyte til de fleste billeder på siderne og under 400 kilobyte til hovedbilleder. Brug JPEG til fotografier, PNG til logoer og billeder med gennemsigtighed og WebP, hvis dit system understøtter det. Ændr altid billedets størrelse til den maksimale bredde, det bliver vist i, før du uploader, i stedet for at lade browseren skalere det ned.
Har billeder betydning for min hjemmesides placering i søgning?
Ja, på to måder. Store ukomprimerede billeder gør din side langsom, og det tager søgemaskinerne med i deres vurdering. Billeder uden alt-tekst går glip af en chance for at fortælle søgemaskinerne, hvad siden indeholder. Billeder i den rigtige størrelse med en beskrivende alt-tekst bidrager både til sidens hastighed og til synlighed i søgning.