Neem een website waar je in de eerste paar seconden de draad kwijtraakte en scroll terug naar boven. De kans is groot dat de afbeeldingen er iets mee te maken hadden. Een stockfoto van lachende vreemden die niets lijken op de mensen die dit bedrijf echt bedient. Een hoofdafbeelding die zo vaag is dat hij bij elk bedrijf in elke branche kan horen. Of helemaal geen afbeeldingen, waardoor de pagina kaal en onaf aanvoelt. Afbeeldingen op een website zijn geen versiering. Ze zijn communicatie. In dit artikel lees je wat afbeeldingen op een website echt doen, hoe je de juiste kiest, waar ze op elke pagina horen en wat er gebeurt als je het verkeerd doet.
Bezoekers verwerken afbeeldingen sneller dan woorden. Voordat iemand je kop leest, heeft zijn brein al een eerste indruk gevormd van het beeld. Dat betekent dat je afbeeldingen al een betoog over je bedrijf houden voordat jij zelf iets kunt zeggen. De vraag is of dat betoog het betoog is dat je wilt houden.
Wat doen afbeeldingen op een website echt?
Elke afbeelding op je site vertelt een bezoeker iets. De hoofdafbeelding op je homepage zegt: "dit is het soort bedrijf dat we zijn en dit is voor wie we er zijn." De foto op je over-ons-pagina zegt: "hier werken echte mensen." De productfoto op je dienstenpagina zegt: "dit krijg je als je met ons werkt."
Als die signalen duidelijk en relevant zijn, voelen bezoekers zich georiënteerd. Als ze vaag of algemeen zijn, voelen bezoekers niets, en dat is de slechtste uitkomst. Een bezoeker die niets voelt, heeft geen reden om verder te lezen.
Afbeeldingen sturen ook waar het oog naartoe gaat. Dat is de kern van visuele hiërarchie op een pagina. Een goed geplaatste afbeelding trekt de aandacht naar de sectie die telt. Een slecht geplaatste splitst de aandacht, waardoor de bezoeker niet weet waar hij daarna moet kijken. Elke afbeelding moet haar plek verdienen door de bezoeker de goede kant op te helpen.
Echte foto's of stockfoto's: maakt het uit?
Ja. Meer dan de meeste mensen verwachten.
Bezoekers zien stockfoto's beter dan vijf jaar geleden. De perfect verlichte vergaderzaal met vier professionals die knikken naar een laptop. De handdruk voor een skyline. De lachende vrouw met een kopje koffie. Deze beelden zijn zo gewoon dat bezoekers een soort visuele immuniteit ontwikkeld hebben. Ze zien ze en registreren niets.
Echte foto's doen het tegenovergestelde. Een foto van je eigen winkelpand, je eigen team, je eigen afgeronde werk. Deze beelden zijn specifiek voor jou en alleen voor jou. Een bezoeker die ze ziet, krijgt bewijs dat er een echt bedrijf achter de website zit, en dat is een van de waardevolste dingen die een afbeelding kan overbrengen. Zelfs een telefoonfoto in goed licht werkt vaak beter dan een gepolijste stockfoto, juist omdat hij echt is.
Toch heeft stockfotografie zijn plek. Voor blogartikelen, voor het illustreren van abstracte begrippen en voor secundaire plekken waar specificiteit minder uitmaakt, doet een goed gekozen stockfoto zijn werk. De regel is: gebruik echte foto's waar vertrouwen op het spel staat, en stockfoto's waar de afbeelding de inhoud alleen ondersteunt en niets beweert over je bedrijf.
Hoe kies je de juiste afbeelding voor elke pagina?
Vraag je eerst af welke taak de afbeelding moet doen op die specifieke pagina, voordat je er een zoekt.
Op je homepage moet de hoofdafbeelding overbrengen wat je doet en voor wie, voordat iemand een woord leest. Als een bezoeker alleen naar je hoofdafbeelding kijkt en geen idee heeft in welke branche je zit, doet de afbeelding haar werk niet.
Op je over-ons-pagina moet de afbeelding persoonlijk zijn. Laat de mensen zien. Laat de ruimte zien. Laat iets zien dat het bedrijf menselijk en specifiek laat voelen in plaats van zakelijk en anoniem.
Laat op een dienst- of productpagina het resultaat zien. Een voor-en-nafoto voor een verbouwingsbedrijf. Een schermafbeelding van het dashboard voor een softwaretool. Een foto van het afgemaakte gerecht voor een cateraar. Afbeeldingen van het resultaat overtuigen meer dan afbeeldingen van het proces, omdat ze de vraag beantwoorden die een bezoeker echt stelt: wat heb ik als dit klaar is?
Als je de taak kent, zoek je pas de afbeelding. Niet andersom.
Wat maakt een afbeelding contraproductief?
Irrelevantie
Een afbeelding die niets specifieks zegt over je bedrijf, je dienst of je klant, laat de bezoeker weten dat niemand goed heeft nagedacht over de visuele ervaring van de site. Die indruk blijft hangen.
Mismatch
Als je tekst warm en gesproken is, maar je afbeeldingen koud en zakelijk, voelt de pagina inconsistent. Bezoekers merken die wanklank op, ook als ze hem niet kunnen benoemen. De sfeer van afbeelding en tekst moet overeenkomen.
Trage laadtijden
Grote, niet gecomprimeerde afbeeldingen zijn de meest voorkomende reden waarom websites traag laden. Een pagina die op een telefoon langer dan drie seconden laadt, verliest een flink deel van zijn bezoekers voordat er iets te zien is. Elke afbeelding die je uploadt moet voor het web zijn gecomprimeerd. De meeste websiteplatforms doen daar een deel van automatisch, maar het is goed om te weten wat je uploadt. Lees hoe websitesnelheid bezoekers en zoekposities beïnvloedt voor het volledige beeld.
Ontbrekende alt-tekst
Elke afbeelding op je site heeft een korte beschrijving nodig van wat erop staat, geschreven in het veld voor alt-tekst. Dat is om twee redenen belangrijk. Bezoekers met een schermlezer vertrouwen op alt-tekst om te begrijpen wat een afbeelding bevat. Zoekmachines gebruiken alt-tekst om afbeeldingen te indexeren. Het overslaan ervan is een snelle manier om zowel toegankelijkheid als SEO-waarde te verliezen.
Waar horen afbeeldingen op je pagina's?
Er is geen algemene regel voor het plaatsen van afbeeldingen, maar een paar patronen werken steeds.
Zet je sterkste afbeelding waar bezoekers het eerst kijken. Op de meeste pagina's is dat de bovenste sectie, above the fold. Scrolt een bezoeker naar beneden voordat hij besluit te lezen, dan vangt de tweede afbeelding, ergens halverwege de pagina, hem tijdens het scrollen. Een derde afbeelding onderaan een lange pagina trekt bezoekers die het meeste al hebben gelezen weer erbij.
Gebruik afbeeldingen om lange stukken tekst te doorbreken, maar alleen als de afbeelding iets toevoegt. Een afbeelding die het punt illustreert uit de alinea ernaast, doet een taak. Een afbeelding die er staat omdat de sectie te lang leek, is opvulling, en bezoekers merken dat.
Op mobiel verschuift de plaatsing, omdat het scherm smal is en afbeeldingen onder elkaar komen. Een afbeelding die op desktop naast tekst staat, verschijnt op mobiel erboven of eronder. Test hoe elke pagina eruitziet op een telefoon en controleer of de afbeelding op zijn nieuwe plek nog steeds klopt. Dat hoort bij ervoor zorgen dat je site de principes van responsive design op elke pagina volgt.
Welk bestandsformaat moeten je afbeeldingen hebben?
De korte versie:
- JPEG voor foto's. Klein bestand, hoge kwaliteit, werkt overal.
- PNG voor logo's, pictogrammen en alles met een transparante achtergrond of scherpe tekst.
- WebP voor allebei, als je platform het ondersteunt. Het levert kleinere bestanden dan JPEG en PNG bij dezelfde kwaliteit. De meeste moderne browsers verwerken WebP zonder problemen.
- SVG voor pictogrammen en eenvoudige illustraties. Schaalt perfect naar elke grootte met heel kleine bestanden.
Mik bij bestandsgrootte op minder dan 200 kilobyte voor gewone paginabeelden. Hoofdafbeeldingen mogen tot ongeveer 400 kilobyte. Alles wat groter is, moet je comprimeren voordat je het uploadt. Een foto van vijf megabyte van je telefoon hoort niet op een webpagina.
Wat is alt-tekst en waarom heeft elke afbeelding het nodig?
Alt-tekst is een korte geschreven beschrijving die bij een afbeelding hoort. Ze staat in de afbeeldingstag op de pagina, onzichtbaar voor ziende bezoekers maar gelezen door schermlezers en zoekmachines. Beide hebben haar nodig om te begrijpen wat je afbeeldingen bevatten.
Voor toegankelijkheid is alt-tekst hoe bezoekers met een schermlezer afbeeldingen op je site ervaren. Zonder alt-tekst horen die bezoekers niets als de afbeelding laadt, waardoor er een gat valt in wat je wilde overbrengen. Voor SEO kunnen zoekmachines afbeeldingen niet zien zoals mensen. Alt-tekst is hoe ze begrijpen wat een afbeelding toont en of die relevant is voor de pagina die hij ondersteunt.
Goede alt-tekst schrijven betekent beschrijven wat er echt op de afbeelding staat, specifiek en eenvoudig. Een foto van een afgeronde keukenverbouwing krijgt alt-tekst als "witte keuken met marmeren aanrechtblad na verbouwing" in plaats van "foto keuken" of "afbeelding1". Past je zoekwoord vanzelf in de beschrijving, neem het dan op. Maar schrijf eerst voor de beschrijving. Alt-tekst die alleen bestaat om zoekwoorden te herhalen, mislukt voor beide doelen.
Elke afbeelding die je uploadt moet alt-tekst hebben voordat de pagina live gaat. Het kost minder dan een minuut per afbeelding en bepaalt zowel wie bij je inhoud kan als hoe je pagina's scoren.
Zo regelt WEMASY afbeeldingen
De Websitebouwer van WEMASY bevat afbeeldingsblokken die je aan elke paginasectie toevoegt. Je uploadt direct in de bouwer, plaatst en wijzigt het formaat zonder code aan te raken en voegt in dezelfde stap alt-tekst toe. Afbeeldingen worden automatisch responsive getoond, dus ze passen zich aan elk schermformaat aan zonder dat je aparte versies voor desktop en mobiel hoeft te maken.
Paginasecties in WEMASY ondersteunen afbeeldingen naast tekst in flexibele kolomindelingen, of als achtergrond over de volledige breedte voor secties waar een sterk beeld de toon zet. In beide gevallen blijft de afbeelding verbonden met de inhoud die ze ondersteunt, in plaats van los in de lay-out te zweven.
Bekijk wat erbij zit op de WEMASY Websitebouwer of bekijk de abonnementen op de prijspagina.
Veelgestelde vragen over afbeeldingen op een website
Heb ik professionele foto's nodig voor mijn website?
Professionele foto's maken echt verschil op belangrijke pagina's, vooral je homepage en over-ons-pagina, waar vertrouwen wordt gevormd. Voor secundaire afbeeldingen, blogartikelen en ondersteunende beelden werkt een goed belichte foto met een moderne telefoon prima. Het gaat erom dat de afbeelding echt is en relevant voor je bedrijf, niet dat een professional hem heeft gemaakt. Met de Websitebouwer van WEMASY zet je dit direct op je website.
Hoeveel afbeeldingen moet een homepage hebben?
Genoeg om de secties te ondersteunen, niet zoveel dat de pagina rommelig voelt of traag laadt. Een sterke hoofdafbeelding, een of twee afbeeldingen in de pagina en eventueel een foto van het team of de werkplek verderop is een redelijke opzet voor de meeste homepages van kleine bedrijven. Elke afbeelding moet haar plek verdienen en niet alleen ruimte vullen.
Mag ik afbeeldingen van stockfotosites op mijn website gebruiken?
Ja, onder voorwaarden. Stockfotosites bieden afbeeldingen aan onder licenties die commercieel gebruik toestaan, maar controleer de voorwaarden van elke afbeelding voordat je hem gebruikt. De praktische beperking is dat deze beelden op veel andere sites staan. Gebruik ze dus voor ondersteunende en secundaire plekken, niet als je belangrijkste beeld op pagina's waar vertrouwen telt, zoals je homepage of over-ons-pagina.
Welk formaat moet ik afbeeldingen uploaden naar mijn website?
Comprimeer voordat je uploadt. Mik op minder dan 200 kilobyte voor de meeste paginabeelden en minder dan 400 kilobyte voor hoofdafbeeldingen. Gebruik JPEG voor foto's, PNG voor logo's en transparante afbeeldingen, en WebP als je platform het ondersteunt. Pas het formaat altijd aan naar de maximale breedte waarop de afbeelding wordt getoond voordat je uploadt, in plaats van de browser hem te laten verkleinen.
Beïnvloeden afbeeldingen de positie van mijn website in zoekmachines?
Ja, op twee manieren. Grote niet-gecomprimeerde afbeeldingen vertragen je pagina, en zoekmachines wegen dat mee in de ranking. Afbeeldingen zonder alt-tekst laten een kans liggen om zoekmachines te vertellen wat de pagina bevat. Afbeeldingen met het juiste formaat en beschrijvende alt-tekst dragen bij aan zowel paginasnelheid als zichtbaarheid in zoekmachines.