5 tips voor professionele website afbeeldingen

Beeld zorgt voor een aantrekkelijke website. Het spoort bezoekers aan om actie te ondernemen. Aangezien geïnteresseerden binnen 7 seconden beoordelen of ze wel of niet op de website willen blijven, helpt het om ze met beeld binnen te slepen. Kies website afbeeldingen die passen bij jouw bedrijf en in 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. En afhankelijk van het design van jouw website heb je meer van dit soort plaatjes verspreid over de pagina’s. Zorg dat je deze afbeeldingen upload met een minimale breedte van 1920 pixels. Ruim 95 procent van de internetgebruikers gebruikt een scherm van dit formaat of kleiner. Wanneer je hier rekening mee houdt voorkom je onscherpe afbeeldingen of nog erger: beelden die uit elkaar getrokken worden.

 

Checklist (branding)

 

Tip 3: Voeg mobile headers toe

Op veel responsive websites wordt de headerafbeelding van de desktopversie geschaald naar een kleiner formaat zodat deze op een mobiel scherm past. Dit heeft tot gevolg dat afbeeldingen heel klein en slecht zichtbaar worden afgebeeld. In andere gevallen wordt de afbeelding een stuk(je) uitgesneden. Dit betekent dat je geen controle hebt over het headerbeeld dat op smartphones vertoont wordt. 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.

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

Tip 4: Gratis website 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, kan echt niet langer. Wil je gebruik maken van gratis beeldmateriaal, kies dan ook voor geschikte kiekjes. Mooie beelden vind je op pexels.com, unsplash.com of pixabay.com. Je downloadt de foto’s binnen een handomdraai, maar het is natuurlijk altijd beter om eigen beelden te gebruiken!

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 of in de fase van het ontwerp dat het design aansluit bij jouw beeldenbank of 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.

Checklist (leadgeneratie)

Geschreven door Mike Lelieveld op 8 augustus 2017.

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