Een website is vaak niet compleet zonder afbeeldingen. Oke, deze website is daar misschien niet het beste voorbeeld van en toch verrijken afbeeldingen een website in veel gevallen. Dat komt deels doordat mensen visueel zijn ingesteld. Het succes van Instagram is daar een goed voorbeeld van. Maar hoe gebruik je afbeeldingen op een manier dat het functioneel is en het de website niet trager maakt?

Soorten afbeeldingen

Je hebt verschillende soorten afbeeldingen. Het meest voor de hand liggend zijn foto’s, illustraties of video. De toepassing is verschillend en ook de manier hoe je het verwerkt binnen een ontwerp.

Het gebruik van stockfoto’s

Gebruik je afbeeldingen van mensen, dan kun je beter foto’s van medewerkers gebruiken dan stock afbeeldingen. Dat is omdat je met foto’s van mensen de indruk wekt dat het iemand is die bij de organisatie achter de website hoort. Bovendien scoren stock afbeeldingen minder goed binnen Google. Mensen zoeken naast tekst ook op afbeeldingen en als je een stockfoto gebruikt dan is de kans kleiner dat je bovenaan staat. Of nog erger mensen associëren het met iets anders dan met jouw organisatie.

Het gebruik van sliders

Bij veel websites zie je op de home page als header een slider met afbeeldingen. Het idee is vaak om de bezoeker een beeld te geven van de verschillende diensten of andere kenmerken die op de website naar voren zullen komen. Klinkt logisch. Toch? Niet als je bedenkt dat de meeste mensen niet wachten op het verschijnen van de volgende slide. Een slide staat vaak enkele seconden op het scherm en tegen de tijd dat de volgende slide verschijnt is de bezoeker al verder gescrold of op een volgende pagina. Een slider als header gebruiken is daarom meestal geen goed idee. Sliders zijn zwaar en hebben daardoor een negatieve impact op de laadtijd van een website. En als je bedenkt dat de meeste bezoekers de verschillende niet zullen zien, dan verliest het ook functioneel de toegevoegde waarde.

Waar sliders wel passen is als onderdeel van een portfolio of bijvoorbeeld binnen een webshop voor het tonen van de details van een artikel. Dat zijn de sliders waar een bezoeker wel gebruik van maakt. Het voegt iets toe voor de bezoeker en kan daarmee opwegen tegen het extra gewicht dat door de slider aan een pagina wordt toegevoegd.

Het kiezen van goede foto’s

Goede foto’s kiezen voor een website is moeilijk. Als je het budget hebt dan kun je een fotograaf in huren, maar dan nog blijft het lastig. Het voordeel van eigen foto’s is dat de website persoonlijk wordt.

Als je kiest voor het gebruik van foto’s besef dan dat je waarschijnlijk meer tijd kwijt bent aan het vinden van de juiste foto’s dan je vooraf verwacht. Zoek afbeeldingen die passen bij het onderwerp of laat foto’s maken die aansluiten. Het is het meer dan waard.

Nog één ding. Gebruik nooit, maar dan ook nooit, die foute stock afbeeldingen met mensen die blij met elkaar blij naar een beeldscherm kijken. Of alles wat daar ook maar een beetje op lijkt. Niemand gelooft het en je kunt nog beter een zwart vierkant tonen.

Geef foto’s de juiste afmetingen

Als ik een website zie die traag is dan is één van de oorzaken in veel gevallen de grootte van foto’s. Het gaat dan zowel om de daadwerkelijke afmetingen als de grootte van het bestand zelf. Afbeeldingen worden dan al snel 1 MB of groter, terwijl een afbeelding van 80 KB ook volstaat en voor een snellere website zorgt.

Stel dat een afbeelding op een pagina maximaal 500 pixels breed kan zijn, dan moet die afbeelding ook 500 pixels breed zijn en niet 1.500 pixels. Net als dat je een foto niet met de hoogste kwaliteit hoeft op te slaan, want vaak is een veel lagere kwaliteit voldoende. Dit kun je eenvoudig doen binnen de meeste fotobewerkingsprogramma’s zoals Affinity Photo of Photoshop.

Illustraties als alternatief voor foto’s

Een populaire variant op foto’s zijn illustraties. Het voordeel van illustraties is dat ze neutraal zijn en als je SVG (scalable vector graphics) gebruikt dan zijn de bestanden bijna altijd kleiner (wat zorgt voor een snellere website) dan bij foto’s. Bovendien schalen SVG bestanden mee met de grote van een scherm waardoor ze altijd perfect ogen.

Bovendien geef je met de juiste illustraties een uniforme uitstraling aan de website en kun je ze ook goed in andere uitingen gebruiken zoals presentaties en brochures.

Net als bij foto’s kun je ook bij illustraties gebruik maken van stock. Zelf vind ik stock illustraties minder slecht dan foto’s, maar je hebt nog steeds het risico dat de concurrent die ook gebruikt. Het kan wel een goede oplossing zijn als je geen budget hebt voor het inhuren van een illustrator. En met een beetje geluk vind je stock illustraties die je mag bewerken, zodat ze toch een beetje uniek zijn. Maar probeer met eigen illustraties te werken. Wanneer je een paar illustraties als basis hebt, dan vormt dat vaak de basis voor meerdere varianten.

Pictogrammen voor navigatie

Pictogrammen zijn niet hetzelfde als illustraties, al ogen sommigen wel als een illustratie. Ze helpen bij het visueel navigeren door een website of app. En frissen direct een anders misschien saaie pagina op.

Ook hier geldt dat het het beste is als je pictogrammen op maat laat maken. Het kost iets meer, maar je bent als persoon of organisatie uniek en dat wil je ook uitstralen. Pictogrammen maken lijkt misschien makkelijk, maar stiekem is het een stuk lastiger om goede pictogrammen te maken dan je waarschijnlijk denkt. Stefan Dziallas laat op Iconwerk zien hoe het goed doet.

Start met teksten en afbeeldingen

Je kunt concluderen dat het kiezen van afbeeldingen voor een website lastig is en dat is het ook. Het is niet voor niets dat de content, teksten en afbeeldingen, één van de eerste dingen is waar je mee moet starten wanneer je start met de ontwikkeling van een nieuwe website. Het beïnvloed het ontwerp en daarom is het goed om vooraf te bepalen wat voor afbeeldingen je gaat gebruiken.

Nog één laatste en belangrijke tip. Zorg dat je de afbeeldingen die je plaatst vrij mag gebruiken. Pluk niet zo maar iets van Google, want de kans is vrij grote dat een organisatie als Getty Images dat ziet en met een boete komt.