5 tips voor professionele website-afbeeldingen

Afbeeldingen zorgen voor een aantrekkelijke website. Ze sporen bezoekers aan om actie te ondernemen. Aangezien bezoekers binnen 7 seconden beoordelen of ze wel of niet op een website willen blijven, helpt het om ze met beeld binnen te slepen.

Als specialisten in converterende websites, raden we bedrijven aan om website-afbeeldingen te kiezen die passen bij het bedrijf en het design.

Tip 1: Afbeeldingen voor retinascherm

2manydots maakt websites die geschikt zijn voor retina-schermen. Een hele hoop producten van Apple maken hier gebruik van. Een retina-geoptimaliseerde website beoordeelt of bij vertoning de standaard afbeelding volstaat, of dat de extra grote versie geschikt voor retina-schermen vereist is. Zo komt de snelheid van de website niet in het gedrang.

 

Wanneer je geen retina optimale website hebt, kun je ervoor kiezen iedere afbeelding twee keer zo groot te uploaden. Nadeel is dan wel dat het plaatje zorgt voor een trage laadtijd op alle andere schermen. Je kunt afbeeldingen ook uploaden op normaal formaat, dan heb je onscherpe plaatjes op retina-schermen.

Retina-schermen hebben twee keer zoveel pixels, waardoor de afbeeldingen scherper ogen.

Tip 2: Houd rekening met de maximale breedte

Headerafbeeldingen zijn vaak paginabreed. Maar houd er rekening mee dat bezoekers verschillende formaten schermen gebruiken. Wat je wilt voorkomen is dat een afbeelding onscherp wordt omdat hij uit elkaar getrokken wordt vanwege een te klein formaat. Zorg daarom dat je een header-afbeelding hebt met een minimale breedte van 1920 pixels. Ruim 95 procent van de internetgebruikers heeft een scherm van die breedte of smaller. 

 

Checklist (branding)

 

Tip 3: Voeg mobile headers toe

Op veel responsive websites wordt de header-afbeelding van de desktopversie geschaald naar een kleiner formaat zodat deze op een mobiel scherm past. Dit heeft tot gevolg dat afbeeldingen heel klein en priegelig worden afgebeeld. In andere gevallen wordt de afbeelding een stuk(je) uitgesneden. Dit betekent dat je geen controle hebt over de header die op smartphones wordt vertoond. Een goede responsive website biedt daarom de mogelijkheid om een aparte header voor mobiele gebruikers te uploaden. Zo houd je exact de regie over wat je laat zien.

 

featured-2MD-divers-HR17

Een goede responsive website biedt daarom de mogelijkheid om een aparte header voor mobiele gebruikers te uploaden.

Tip 4: Gratis afbeeldingen moeten goed zijn

Stockfoto’s zijn de nagel aan de doodskist van iedere website. Een plaatje met lachende mensen om een vergadertafel op 200 meter boven New York terwijl jullie op een bescheiden kantoor in Blaricum werken – daar trapt niemand in. Wil je gebruik maken van gratis beeldmateriaal, kies dan ook voor geschikte kiekjes. Gratis rechtenvrije afbeeldingen vind je op:

Je downloadt de foto’s met een handomdraai, maar het is natuurlijk altijd beter om eigen beelden te gebruiken. De keuze voor gratis stockfoto's dient dan ook een tijdelijke te zijn.

Tip 5: Liggend of staand

Wanneer het webdesign ervan uitgaat dat de beelden liggend moeten zijn, is het heel onverstandig hier staande foto’s in te voegen. Zorg dus óf in de ontwerpfase dat het design aansluit bij jouw beeldenbank, óf zorg bij het realiseren van een beeldenbank dat je fotografeert op basis van het webdesign. Jouw webdesigner kan vaak aangeven welke formaten er in het ontwerp gebruikt worden.

Marquis Evenementen wilde een beeldende website. Wij gaven vooraf daarom bovenstaande tips mee. Bekijk de website en laat je inspireren.

New call-to-action

Geschreven door Mike Lelieveld op 13 juli 2019.

Kennisblog

Regelmatig publiceren we - naast de workshops die we organiseren - artikelen over trends en ontwikkelingen uit ons vakgebied. Vind je onze blogs interessant en wil je op de hoogte blijven van nieuwe publicaties? Meld je hieronder aan voor de blog alert.

Gratis checklists, whitepapers

Blog alert

Meer artikelen