Zo kies je de juiste afbeeldingen voor je website

Bepaal eerst wat de afbeelding moet doen

Vraag jezelf vóór het kiezen af: ‘Wat moet een bezoeker hier begrijpen of voelen?’

Een afbeelding op de homepage kan je bedrijf introduceren. Een foto bij een dienst kan het werk of het resultaat tonen. Een teamfoto helpt klanten de mensen herkennen die ze zullen ontmoeten. Kies een beeld dat dat doel ondersteunt.

Omschrijf je behoefte in één zin voordat je gaat zoeken: ‘Deze foto moet een kleine badkamer tonen die wij hebben gerenoveerd, met links ruimte voor de kop.’ Een concrete opdracht helpt je aantrekkelijke foto's af te wijzen die niet bij de pagina passen.

Vergelijk opties met drie vragen: Wat vertelt dit beeld? Is die informatie hier nuttig? Komt de boodschap ook over binnen de beschikbare ruimte? Voegt het beeld geen nuttige informatie of passende sfeer toe, dan werkt alleen tekst misschien beter.

Kies een openingsbeeld dat bij je bedrijf past

Het grote openingsblok, vaak de hero genoemd, is voor veel bezoekers het eerste wat ze zien. De afbeelding moet de kop ondersteunen en er niet mee concurreren.

Een renovatiebedrijf kan een afgewerkte kamer of een vakman aan het werk tonen. Een fysiotherapiepraktijk kan een natuurlijke foto van een consult of oefening gebruiken. Een plaatselijk café kan de ruimte of een herkenbaar gerecht laten zien.

Laat voldoende rustige ruimte voor de kop en knoppen. Trekt het spectaculaire beeld zo veel aandacht dat bezoekers het aanbod niet begrijpen, kies dan een eenvoudiger beeld.

Beoordeel de foto in de echte pagina-indeling. Een foto die op zichzelf prachtig is, kan precies achter de kop een drukke achtergrond hebben. Gebruik gewone paginatekst voor de kop en knop, in plaats van ze in de afbeelding vast te leggen. Zo kunnen ze zich aan de indeling aanpassen.

Voorbeeld: drie beelden voor dezelfde homepage

Stel je een renovatiebedrijf voor met de kop ‘Badkamerrenovaties voor kleine woningen’. Het kiest uit drie foto's:

• Een verzorgde stockfoto van een grote luxe badkamer. Het licht is mooi, maar de ruimte past niet bij de kleine badkamers die het bedrijf wil laten zien. De foto kan verkeerde verwachtingen wekken.
• Een eigen foto van een afgewerkte badkamer, krap uitgesneden en met zichtbare rommel. Het onderwerp past, maar de indeling is moeilijk te begrijpen. Probeer een andere uitsnede of een andere foto van hetzelfde project.
• Een duidelijke foto van een afgewerkte kleine badkamer. De opbergruimte, douche en beschikbare ruimte zijn goed zichtbaar. Laat ze ook plaats voor de kop, dan is dit de beste keuze voor deze pagina.

Verdwijnt de douche in de mobiele uitsnede van de derde foto, maak dan een aparte uitsnede of plaats de tekst ernaast. Het onderwerp, de boodschap en de uiteindelijke indeling bepalen samen de keuze.

Toon de dienst of het resultaat

Foto's bij diensten zijn vooral nuttig als bezoekers zich het werk kunnen voorstellen. Een loodgieter kan een afgeronde installatie of een monteur bij een klant thuis tonen. Een fotograaf kan een echt voorbeeld van het eigen werk laten zien. Dat vertelt meer dan een algemene foto van iemand achter een laptop.

Kies een beeld dat antwoord geeft op een vraag die de klant waarschijnlijk heeft. Een afgewerkte kamer toont het resultaat; een close-up een verbinding of afwerking; iemand aan het werk een deel van het proces. Kies op basis van wat de sectie belooft uit te leggen.

Voeg bij een project een kort bijschrift toe dat het werk en een belangrijk detail benoemt. ‘Ingebouwde opbergruimte onder een schuin dak’ vertelt meer dan ‘Weer een tevreden klant’. Beschrijf alleen wat het project werkelijk laat zien en wees concreet over kwaliteit of resultaten.

Gebruik natuurlijke foto's van je echte team

Een teamfoto kan een klein bedrijf toegankelijker maken als daarop de mensen staan die klanten echt ontmoeten. Een vertrouwde werkplek, natuurlijke gezichtsuitdrukkingen en ontspannen houdingen zijn meestal overtuigender dan een sterk geënsceneerde groepsfoto.

Houd bij individuele portretten de uitsnede en achtergrond vergelijkbaar. Gebruik actuele foto's die passen bij de dienstverlening die klanten mogen verwachten.

Een naam en functie naast het portret koppelen het gezicht aan de persoon die de vraag beantwoordt of de afspraak verzorgt. Een eenvoudig, goed belicht portret kan volstaan; een uitgebreide fotoshoot is niet nodig. Vraag de afgebeelde mensen toestemming vóór publicatie en voorkom dat klanten of privégegevens onbedoeld op de achtergrond staan.

Kies blogbeelden die bij het artikel passen

Een blogbeeld moet het onderwerp herkenbaar maken, niet alleen ruimte vullen. Bij een artikel over verfkleuren kan een kamer met een duidelijk kleurvoorbeeld beter werken dan iemand met een kwast.

Een eenvoudig schema, een echt voorbeeld of een foto van je werk kan relevanter zijn dan een stockfoto. Stem het soort beeld af op de uitleg: een vergelijking kan twee voorbeelden naast elkaar nodig hebben, een handleiding een schermafbeelding van de specifieke stap. Een decoratieve omslag kan het onderwerp introduceren, maar vervangt geen voorbeelden die nodig zijn om de instructies te begrijpen.

Controleer de uitsnede op computer en mobiel

Een brede afbeelding kan er op een telefoon heel anders uitzien. De browser kan de zijkanten afsnijden, waardoor een persoon, product of belangrijk detail bij de rand verdwijnt.

Bekijk de afbeelding op de grootte waarin ze op de pagina verschijnt. Het hoofdonderwerp moet op beide apparaten zichtbaar blijven. Staat er tekst over het beeld, zorg dan voor een rustige achtergrond erachter. Is er geen geschikte plek, zet de tekst dan naast het beeld.

1. Plaats het beeld in de echte sectie. Neem de definitieve kop, knop en omliggende tekst mee, in plaats van alleen de foto te bekijken.
2. Controleer de pagina-indeling in een brede en een smalle weergave. Let op afgesneden gezichten, ontbrekende productdetails en tekst op drukke delen.
3. Pas de uitsnede of de positie van het onderwerp aan. Heeft je editor een instelling voor het focuspunt, verplaats die naar het belangrijke detail en bekijk het voorbeeld opnieuw.
4. Controleer de pagina op een telefoon. De betekenis van het beeld en essentiële labels moeten op de weergegeven grootte duidelijk blijven.

Werkt één uitsnede niet voor beide formaten, dan heeft de website mogelijk verschillende uitsneden per schermgrootte nodig. De MDN-gids voor responsieve afbeeldingen legt deze aanpak, art direction genoemd, uit voor degene die je pagina bouwt.

Gebruik stockfoto's bewust

Stockfoto's kunnen handig zijn als je geen geschikt eigen beeld hebt. Vraag jezelf vóór de keuze af:

• Heeft de foto duidelijk te maken met dit bedrijf of deze dienst?
• Oogt ze natuurlijk en geloofwaardig?
• Zou dezelfde foto op de website van vrijwel elke concurrent kunnen staan?

Voelt het beeld te algemeen, zoek dan een specifiekere optie of gebruik een echte foto van je werk, producten, ruimtes of team. Eigen foto's helpen bezoekers begrijpen wat ze kunnen verwachten.

Een stockfoto kan een algemeen onderwerp illustreren of sfeer scheppen. Ze is minder geschikt als je je echte team, locatie of afgeronde werk wilt tonen. Presenteer haar niet als bewijs van een project dat je hebt uitgevoerd. Een relevante stockfoto kan wel beter zijn dan een eigen foto die te donker, afleidend of onduidelijk is om haar functie te vervullen.

Zorg voor samenhang tussen de beelden op je website

Beelden uit verschillende bronnen kunnen bij elkaar passen. Zoek een gedeelde eigenschap, zoals natuurlijk licht, vergelijkbare kleuren of een consistente fotografiestijl.

Je hoeft niet elke foto hetzelfde te bewerken. Streef naar een samenhangende pagina waarin elk beeld bij zijn eigen sectie past.

Begin met twee of drie afspraken: vergelijkbare uitsneden voor teamportretten, een vaste uitsnede voor blogomslagen en natuurlijk licht voor projectfoto's. Bekijk de beelden samen op de pagina. Vervang een afwijkend beeld voordat je een zwaar filter op de hele verzameling toepast.

Korte checklist vóór publicatie

• Je kunt uitleggen wat het beeld aan de sectie toevoegt.
• Het geeft het bedrijf, onderwerp of voorbeeld correct weer.
• Het hoofdonderwerp blijft zichtbaar in de werkelijke desktop- en mobiele indeling.
• Tekst en knoppen blijven leesbaar en belangrijke informatie staat ook als paginatekst beschikbaar.
• Belichting, uitsnede of kleur passen bij de omliggende beelden.
• Je hebt toestemming voor gebruik en eventuele verplichte bronvermelding gecontroleerd.

Maak de gekozen beelden klaar voor je website

Gebruik na de selectie onze gidsen om geschikte beeldafmetingen te kiezen, zonder vervorming te verkleinen of vergroten en bruikbare alt-teksten en bestandsnamen te schrijven.

Bedenk ook hoe iemand die het beeld niet kan zien de informatie krijgt. Betekenisvolle beelden hebben een passende tekstuele beschrijving nodig; puur decoratieve afbeeldingen krijgen doorgaans lege alt-tekst. De W3C-handleiding over afbeeldingen legt uit hoe de functie van het beeld die keuze bepaalt.