Afbeeldingen en foto’s zijn belangrijk om de aandacht van je bezoekers te trekken en je boodschap te versterken.
Er zijn ontzettend veel afbeeldingen om uit te kiezen. In dit artikel leer je de belangrijkste aspecten waar je op moet letten, zodat je de juiste afbeelding kunt kiezen.
Waarom afbeeldingen gebruiken?
Laten we beginnen met helder krijgen waarom je überhaupt afbeeldingen zou moeten gebruiken.
Afbeeldingen spelen een belangrijke rol in je branding en uitstraling.
Een ontwerp met alleen maar tekst kan snel saai ogen, terwijl visuele elementen de aandacht trekken en je boodschap kunnen versterken.
Er is een bekend gezegde: “Een beeld zegt meer dan duizend woorden.”
Dit betekent dat complexe ideeën vaak effectiever overgebracht kunnen worden met een goed gekozen afbeelding dan met tekst alleen.
Door bewuste keuzes te maken in het gebruik van afbeeldingen, kun je je website niet alleen visueel aantrekkelijk maken, maar ook effectiever in het bereiken van je doelen.
Verschillende soorten afbeeldingen
Niet alle afbeeldingen hebben hetzelfde doel. Ik maak meestal onderscheid tussen drie verschillende soorten afbeeldingen die je kunt gebruiken:
- Sfeerfoto’s: Deze foto’s creëren een bepaalde sfeer of gevoel. Ze zijn vaak gericht op het oproepen van emoties en worden vaak gebruikt om de toon van een website of flyer te zetten.
- Productfoto’s: Dit soort foto’s tonen specifieke producten, vaak op een duidelijke en gedetailleerde manier. Ze zijn essentieel voor webshops en product gerelateerde promoties.
- Persoonlijke foto’s: Dit kunnen foto’s zijn van jou, je team of je bedrijf. Persoonlijke foto’s voegen een authentiek en menselijk element toe. Vooral voor kleine bedrijven en ZZP’ers kan het gebruik van dit soort foto’s helpen met het opbouwen van vertrouwen.
Hoe kies je de juiste afbeeldingen?
Het beste is vaak om zelfgemaakte foto’s van hoge kwaliteit te gebruiken, omdat dit authentieker en professioneler overkomt.
Dat is echter de meest ideale situatie, en niet iedereen heeft daar het budget of de mogelijkheden voor.
Heb je geen eigen foto’s, dan kun je ook gebruik maken van stockfoto’s.
Probeer wel foto’s te vermijden waarvan je overduidelijk kunt zien dat dit stockfoto’s zijn. Dit kan je website namelijk juist onpersoonlijk en generiek maken.
Gebruik in elk geval nooit foto’s van onbekende mensen waarmee je suggereert dat zij voor jouw bedrijf werken. Dit zal je betrouwbaarheid juist schaden.
Bij het kiezen van afbeeldingen is het daarnaast ook belangrijk om te letten op de kleurwarmte en stijl.
Afbeeldingen met dezelfde kleurtoon en stijl zorgen voor een samenhangende en professionele uitstraling.
Grote verschillen in felheid of stijl tussen afbeeldingen kunnen daarentegen juist voor een amateuristische uitstraling zorgen.
Er zijn een aantal goede websites, zowel gratis als betaald, waar je professionele stockfoto’s kunt uitkiezen:
- Unsplash
- Pexels
- Pixabay
- Burst (Shopify)
- Lummi
- Shutterstock (betaald)
- Adobe Stock (betaald)
Let wel goed op de licenties. Sommige foto’s zijn gratis voor commercieel gebruik, terwijl andere een verwijzing of vergoeding vereisen.
Welk bestandstype wanneer gebruiken?
Bij het kiezen van het juiste bestandstype voor je afbeeldingen is het belangrijk te weten wanneer je voor JPG, PNG, SVG of GIF kiest:
- JPG: Dit formaat is geschikt voor foto’s en afbeeldingen met veel kleuren of details. JPG’s comprimeren de bestandsgrootte, wat het ideaal maakt voor websites waar snelheid van belang is. Ze behouden echter niet altijd de hoogste kwaliteit bij compressie.
- PNG: Dit formaat gebruik je wanneer je afbeeldingen met transparante achtergronden nodig hebt, zoals logo’s. PNG’s zijn ook een goede keuze voor afbeeldingen met scherpe randen en weinig kleuren, zoals iconen of grafieken. Ze behouden meer details, maar kunnen groter zijn in bestandsgrootte.
- SVG: SVG is een vectorformaat dat geschikt is voor afbeeldingen die geschaald moeten worden zonder kwaliteitsverlies, zoals logo’s of iconen.
- GIF: Dit formaat is ideaal voor eenvoudige animaties en afbeeldingen met weinig kleuren. GIF ondersteunt transparantie, maar vanwege de beperkte kleurenschaal (maximaal 256 kleuren) is het minder geschikt voor foto’s of gedetailleerde afbeeldingen. Het wordt daarom vooral gebruikt voor korte, herhalende animaties op websites.
Specifieke toepassingen voor flyers en websites
Met mijn website richt ik mij vooral op het maken van websites en ontwerpen van flyers. Mijn advies is hier dan ook grotendeels op gericht.
Wanneer ik echter afbeeldingen uitkies voor websites hanteer ik andere eisen voor de resolutie dan voor flyers.
Bij flyers is het belangrijk dat de afbeeldingen een resolutie hebben van minimaal 300 DPI (dots per inch).
Dit is nodig voor een scherpe afdrukkwaliteit. Lagere resoluties kunnen wazig ogen, wat de kwaliteit van de flyer niet ten goede komt.
De ideale resolutie voor een afbeelding op een website hangt voornamelijk af van twee factoren: kwaliteit en de bestandsgrootte.
Grote afbeeldingen hebben namelijk een negatieve impact op de laadtijd van je website. En een langzame website zorgt weer voor een slechte gebruikerservaring en het kan ook negatieve invloed hebben op je SEO prestaties.
Welke resolutie je het best kunt gebruiken hangt vooral af van het ontwerp.
Een thumbnail voor een uitgelicht blog artikel is veel kleiner dan een hero afbeelding. Het is dan ook niet verstandig om in beide gevallen dezelfde resolutie te gebruiken.
Kortom de resolutie moet zo hoog zijn dat de afbeelding scherp blijft, maar het is belangrijk om de bestandsgrootte te verkleinen voor snelle laadtijden.
Tools zoals TinyPNG kunnen helpen bij het comprimeren van afbeeldingen zonder veel kwaliteitsverlies.
Voor de exacte resolutie moet je dus naar je eigen design kijken, omdat dit op iedere website verschilt.
Een blog overzicht waarin de thumbnails in 4 kolommen worden weergegeven kan lager dan wanneer je het in 2 kolommen toont.
Om je een indicatie te geven zou je de volgende resoluties als richtlijn kunnen gebruiken:
- Hero-afbeeldingen of banners: Tussen 1200 en 2000 pixels breed.
- Afbeeldingen in content: Meestal tussen 800 en 1200 pixels breed.
- Thumbnail of kleine afbeeldingen: Rond 150-300 pixels breed.