Waarom goede foto’s op je website super belangrijk zijn!

Websites
Door:
Thomas Kleverlaan
leestijd:
4
minuten
9 augustus 2022
Foto van foto camera met groene bladeren er omheen als voorbeeld foto

Of je nu je eigen website opmaakt of dit doet voor een (groot) bedrijf, het is heel belangrijk om passende foto’s op de website te voorzien. Hoe je aan dat beeldmateriaal komt en waarop je moet letten, lees je hierna.

Hoe werkt visuele verleiding?

Visuele verleiding of visual persuasion is een belangrijk onderdeel bij het opmaken van een website. Elke bezoeker van een website zoekt de voor haar / hem interessante informatie en scant als het ware de website op ankerpunten hiervoor. Hoe sneller de bezoeker deze info vindt, hoe meer die geneigd is om op je website te blijven en door te klikken naar andere onderdelen van de website. In het beste geval wordt de bezoeker van je website jouw klant door een online aankoop of andere verrichting uit te voeren. Conversie heet dit.

Om de bezoeker van je website tot conversie te brengen, dien je in het brein van de potentiële klant te kruipen. Die baseert zich op visuele input, dus is het belangrijk te weten welke visuele items het voor de bezoeker makkelijker maken om te converteren. Aan welke visuele verleiding kan hij / zij niet weerstaan?

Indien voor het bedrijf een huisstijl werd opgemaakt, dienen ook de visuele elementen hierbij aan te sluiten. Het design en de tekst van de website dienen weloverwogen te worden ingezet. Goede, aantrekkelijke foto’s vormen ongetwijfeld het belangrijkste onderdeel.

Lees hier meer: Waarom een website zo belangrijk is!

Waar plaats ik best visuele elementen op mijn website?

Het menselijk brein gaat heel selectief om met visuele prikkels. Slechts zo’n 4% van wat we zien, nemen we bewust op. Het is dan ook uiterst belangrijk om de visuele elementen zo aantrekkelijk mogelijk te maken. Daarnaast dienen we ook rekening te houden met het leespatroon. Voor een websitebezoeker uit westerse landen gebeurt dit via het F-patroon. Daarbij lezen we van links naar rechts, waarna we onze aandacht een laag naar beneden schuiven en opnieuw van links naar rechts lezen. Indien de bezoekers van jouw website een niet-westerse achtergrond hebben, dien je hiermee rekening te houden bij de opmaak van de pagina’s en het plaatsen van de visuele elementen.

Wanneer iemand een webpagina bekijkt volgens het F-patroon, verwacht die dat het aanklikbare logo links bovenaan staat. Die plaats zorgt er ook voor dat het logo beter wordt onthouden door de bezoeker. Verder zijn de afbeeldingen in de header en de productfoto’s sterk bepalend voor de look and feel van een website.

F patroon gebruiken op je website met hier als voorbeeld met een wireframe
Lees er meer over in onze blog: Het belang van een goed logo

De juiste foto’s kiezen

Je dient je website dus te voorzien van visuele elementen die een potentiële klant triggeren tot conversie. Allemaal goed en wel, maar welke foto’s gebruik je?

Allereerst dienen je foto’s een duidelijke link te hebben met de inhoud van je webpagina. Schrijf je over dierenwelzijn, gebruik dan foto’s van dieren. Kaart je een maatschappelijk thema aan, zorg dan dat er mensen op de foto’s voorkomen. Een foto dient overtuigingskracht te hebben. Om het met een cliché te zeggen: een beeld zegt meer dan 1000 woorden. Test het maar eens uit: zoek een plaatje op internet dat jou aanspreekt. Probeer dat beeld te beschrijven aan iemand. Op welke plaats werd de foto genomen? Binnen of buiten? Welk weer is het? Staan er personen op de foto? Wat doen ze? Welke kledij dragen ze? Hoe voelen ze zich?... Je zal merken dat je heel veel woorden nodig hebt om je gesprekspartner alle details van jouw foto te beschrijven.

Een goed gekozen foto zal de bezoeker van jouw website dus een goed idee geven van de ervaring, van het product, van de service die je biedt. Voor het aanbieden van een taxirit bijvoorbeeld gebruik je een lachende taxichauffeur, een luxueus en schoon interieur van de taxi en een lachende klant die letterlijk centraal op de foto staat. Zoals bij veel online ontwerpen komt het erop neer om te testen waar je de foto plaatst, welke compositie en stijl best werkt enzovoort. Enkel op die manier kom je tot conversie optimalisatie.

Vervolgens kies je een manier om de foto’s te verkrijgen. Een fotograaf op pad sturen, leidt doorgaans tot de meest passende beelden. Een voordeel is ongetwijfeld de briefing op maat die je de fotograaf meegeeft, maar een nadeel is dat het tijdrovend en ook wel duur is. Via online kanalen zoals iStock, Pixabay en Unsplash kan je middels een zoekfunctie gepaste foto’s bij jouw onderwerp vinden. Meestal zijn de foto’s auteursrechtelijk beschermd en dien je ze aan te kopen voor gebruik. Er zijn echter ook gratis foto’s te vinden die je vrij mag gebruiken. Check vooraf altijd goed waar je foto’s vandaan komen en of ze vrij van rechten zijn!

Het formaat van een foto is eveneens belangrijk. Dit wordt weergegeven in aantal pixels, wat meteen ook de grootte van de foto bepaalt. Hoe zwaar een foto is, wordt weergegeven in kB of MB. De zwaarte is recht evenredig met de grootte. Hoe groter (en dus hoe zwaarder) de foto, hoe trager je website zal reageren. Je hebt er dus alle belang bij om de foto’s niet te zwaar te maken. Aan de andere kant mogen foto’s ook niet te klein zijn, want dan is er geen goede kwaliteit om weer te geven. Wat moet het dan zijn? Als vuistregel kan je de 400-pixel-regel hanteren: de lengte of breedte van de foto is ongeveer 400 pixels. De andere zijde mag meer pixels hebben. Op die manier creëer je doorgaans een goede webkwaliteit en zijn de foto’s niet te zwaar.

Omdat een goede digitale foto al snel uit duizenden pixels en dus meerdere megabytes bestaat, dien je de foto te verkleinen. Compressie van 5760 x 3840 pixels (2,1 MB) naar 600 x 400 pixels (ong. 40 kB) is bijvoorbeeld ideaal.

Nog iets om mee rekening te houden is het format van de foto. Doorgaans kan je kiezen tussen .jpg of .png. Beide formats doen het prima op websites. Jpg geeft als resultaat een iets lichter bestandsformaat en is dus verkiesbaar.

Vijf tips voor goede foto’s op je website

Beelden trekken en houden dus de aandacht van de websitebezoeker op je webpagina. Dat beeldredactie bijgevolg voldoende aandacht moet krijgen, hoeft geen verder betoog. Hieronder vijf tip's om goed beeldmateriaal voor op je website te kiezen:

Tip 1: Kies de juiste foto’s

Foto’s dienen te raken en verhalen te dragen. Zorg ervoor dat jouw foto je product, service, verhaal ondersteunt. Beter een eigen gemaakte foto (die misschien wat minder professioneel oogt) dan een iStock-foto die je op verschillende websites ziet terugkomen.

Tip 2: Kies het juiste formaat

Niet te groot en niet te klein. Zowel voor het design van de website als voor de snelheid van de website. Om ervoor te zorgen dat de foto’s ook goed op mobiel laden via een responsive website kan je de 400-pixel-regel als uitgangspunt gebruiken.

Tip 3: Match je foto’s met je huisstijl

Wanneer de website is opgemaakt volgens een bepaalde huisstijl, zorg je er best voor dat ook de foto’s op je website die huisstijl zo goed mogelijk volgen. Dit kan door een filter te gebruiken, een bepaald perspectief consequent toe te passen, een product opstelling te herhalen enzovoort.

Tip 4: Check de auteursrechten

Zorg dat je weet waar je foto vandaan komt en dat de maker ervan toestemming verleent om de foto te gebruiken. Dit kan tegen (een kleine) betaling of gratis. Niets is zo erg als het ongeoorloofd gebruik van foto’s. Om er zeker van te zijn dat je geen problemen krijgt met auteursrechten gebruik je best eigen foto’s of foto’s die in jouw opdracht door een fotograaf werden gemaakt (en waarvan je de rechten op de foto’s dus verkrijgt). Indien er op eigen gemaakte foto’s mensen voorkomen, vraag je hun toestemming om de foto te mogen publiceren.

Tip 5: Have fun!

Als het voor jou goed oogt, dan zal het meestal ook goed zijn. Bij commerciële websites hou je rekening met het oogpunt van de klant. Zorg ervoor dat je een samenhangend en aantrekkelijk geheel creëert.

Wil je meer weten over goede foto’s op je website, neem dan contact met ons op.

Thomas Kleverlaan
Web ontwikkelaar

Wilt u meer weten over onze website ontwikkeling mogelijkheden?

Dank u! Uw inzending is ontvangen!

Oeps! Er ging iets mis bij het verzenden van het formulier.

Abel Abels

Art director

Wilt u meer weten over onze huisstijl mogelijkheden?

Dank u! Uw inzending is ontvangen!

Oeps! Er ging iets mis bij het verzenden van het formulier.

Gerelateerde blogs

Whatsapp button om contact op te nemen met Thomas van Thab Design

Gratis scan

Meer uit je website halen?

Laat je website gratis beoordelen door een echte expert!
Website voorbeeld van Dekker Bouw
Bedankt voor het insturen van je website! 
Binnen 24 uur krijg je de scan terug.
Oops! Something went wrong while submitting the form.