Een betere websiteafbeelding doet meer dan er goed uitzien

Ik werk met plezier aan communicatie die verbindt en verkoopt.

Dat klinkt groter dan een paar foto's op een website vervangen. Dat is het niet. Een foto kan iemand helpen de waarde te herkennen nog voordat hij een zin heeft gelezen. Een foto kan een pagina ook traag maken, de verkeerde verwachting scheppen, of een gepolijste indruk geven die het echte bewijs eronder verzwakt.

Een foto van 10 MB kan prachtig bronmateriaal zijn. Een bruikbaar onderdeel van de website is het nog niet.

Het communicatiewerk begint met de vraag wat de afbeelding moet overdragen, waar hij verschijnt, wat de ontvanger moet begrijpen en wat er daarna moet gebeuren.

Mensen gebruiken de afbeelding voordat ze het argument lezen

Bezoekers verwerken niet geduldig elk element in de volgorde waarin een projectteam het besprak. Ze scannen. Een gezicht, een actie, een omgeving, een product of een zichtbaar resultaat wordt een vroeg signaal: is dit relevant voor mij, is dit geloofwaardig, en moet ik doorlezen?

Onderzoek naar visuele framing biedt een nuttige waarschuwing. In een experiment over nieuwscommunicatie zorgden afbeeldingen voor sterke framing-effecten en beïnvloedden ze gedragsintenties, ook wanneer de begeleidende tekst een ander frame had. De afbeelding is geen neutrale versiering. Ze kan sturen wat mensen opmerken en wat bruikbaar aanvoelt. Zie de studie in het Journal of Communication.

Verwerkingsgemak voegt nog een laag toe. Onderzoek van Reber, Schwarz en Winkielman koppelt makkelijkere perceptuele verwerking aan positievere esthetische reacties. Duidelijk contrast, herkenbare vormen en visuele samenhang kunnen informatie makkelijker te verwerken laten aanvoelen. Dat betekent niet "maak alles mooi". Het betekent dat onnodige visuele wrijving de ervaring kan beïnvloeden voordat de bezoeker de inhoud heeft beoordeeld. Lees het onderzoek naar processing fluency.

Gebruik een beeld dat dezelfde waarheid draagt als de woorden

Een generieke berg, vergaderruimte of handdruk kan aantrekkelijk zijn. Hij bewijst zelden de specifieke waarde van het werk.

Een sterker beeld kan laten zien:

• de echte persoon wiens oordeel klanten kopen;
• het product in gebruik, in de omgeving waar het waarde creëert;
• de gerespecteerde partner, publicatie of klant die onzekerheid wegneemt;
• het resultaat dat mensen herkennen zonder interne uitleg;
• of de context die het verhaal onderscheidend maakt.

Voor de Mark Gunter Photo Awards kon een redactionele placeholder stijl communiceren. Een echte aankondiging dat Chris Burkard bij de jury komt, communiceert bewijs. De tweede afbeelding toont de echte persoon, de prijs en de samenwerking. Ze helpt een bezoeker begrijpen waarom de tiende editie ertoe deed.

De technische aanpassing was klein: het gekozen bestand werd een WebP-bestand van 1200 bij 1500 pixels van ongeveer 44 KB. De communicatieve verbetering was groter: minder onduidelijkheid, sterkere geloofwaardigheid en een snellere pagina.

Laadsnelheid is onderdeel van de boodschap

Als de afbeelding te lang op zich laat wachten, kan ze haar communicatietaak niet uitvoeren. Erger nog: ze kan de hoofdinhoud vertragen en de hele organisatie minder doordacht laten overkomen.

Afbeeldingen nemen vaak een groot deel van de zichtbare pagina en gedownloade data in beslag. Google's richtlijnen voor webprestaties leggen uit waarom geoptimaliseerd afbeeldingsbeleid de laadprestaties kan verbeteren en netwerkverkeer kan verminderen. Een prominente afbeelding kan ook het Largest Contentful Paint-element van de pagina worden, wat betekent dat ze vaak een directe rol speelt in hoe snel de pagina bruikbaar aanvoelt. De praktische conclusie is simpel: de meest prominente afbeelding verdient bewuste formaatkeuze en compressie.

Een bezoeker op kantoor-wifi merkt een download van 7 MB misschien niet. Een prospect in de trein, op een evenement of met mobiele data ervaart mogelijk een heel ander bedrijf.

Snel betekent niet wazig. Het betekent dat de browser genoeg visuele informatie ontvangt voor het beoogde weergaveformaat, zonder duizenden onzichtbare pixels te downloaden.

De praktische 80/20-norm voor afbeeldingen

Voor de meeste redactionele afbeeldingen op deze website gebruik ik de volgende norm:

• 1600 bij 900 pixels voor een liggende artikelafbeelding;
• WebP als voorkeursbestandsformaat;
• 100 tot 250 KB als bruikbare streefwaarde;
• een beschrijvende bestandsnaam in plaats van een intern cameranummer;
• echte width- en height-attributen in de HTML;
• beschrijvende alt-tekst voor toegankelijkheid en context;
• een bijschrift dat uitlegt waarom de afbeelding ertoe doet.

Een gedetailleerde foto heeft misschien meer data nodig. Een strakke illustratie heeft er veel minder nodig. Het doel is niet het kleinst mogelijke bestand. Het doel is het kleinste bestand dat de bedoelde visuele waarheid nog overtuigend overdraagt.

Ook zoekmachines hebben een geslaagde overdracht nodig

Optimalisatie voor afbeeldingenzoekopdrachten is ook een communicatievraagstuk. Een zoekmachine heeft genoeg context nodig om het bestand te vinden, te begrijpen wat het voorstelt en het te koppelen aan de juiste pagina en zoekopdracht.

Google's richtlijnen voor afbeeldingen in zoekresultaten adviseren standaard HTML-afbeeldingselementen, relevante afbeeldingen van hoge kwaliteit, beschrijvende bestandsnamen, nuttige alt-tekst en plaatsing dicht bij relevante tekst. Google kijkt bij het interpreteren van een afbeelding ook naar de paginatekst, het bijschrift en de metadata.

Voor Google Discover kunnen grote, relevante afbeeldingen een sterkere preview opleveren. Google raadt momenteel afbeeldingen van minstens 1200 pixels breed aan en ondersteunt grote previews via de instelling max-image-preview:large. Zie de officiële Discover-richtlijnen.

Dat verklaart waarom één afbeelding op meerdere technische plekken kan verschijnen:

• de zichtbare hero-afbeelding van het artikel;
• de Open Graph-afbeelding die LinkedIn of WhatsApp toont;
• de deelafbeelding voor Twitter of X;
• de gestructureerde Article-data;
• en het gewone afbeeldingselement dat zoekmachines en ondersteunende technologie interpreteren.

Dat zijn geen losse marketingtrucs. Het zijn verschillende ontvangers die dezelfde communicatie in een ander formaat opvragen.

Van bronfoto naar bruikbaar communicatiemateriaal

1. Kies op betekenis. Kies de foto die de bewering het beste ondersteunt, niet automatisch de meest spectaculaire foto.
2. Snijd bij voor de plaatsing. Houd de belangrijke persoon, het product of de actie zichtbaar op desktop- en mobiele formaten.
3. Verklein voordat je comprimeert. Een camerabestand van 6000 pixels hoort niet in een ruimte van 1200 pixels terecht te komen.
4. Comprimeer met verstand. Een WebP-kwaliteit van rond de 75 tot 80 is een bruikbaar startpunt. Bekijk gezichten, kleurverlopen en tekst op ware grootte.
5. Benoem het onderwerp. mark-gunter-chris-burkard-jury.webp draagt meer betekenis dan IMG_7392.webp.
6. Beschrijf de zichtbare waarheid. Alt-tekst moet uitleggen wat er te zien is, zonder hem vol te stoppen met zoekwoorden.
7. Leg de relevantie uit. Gebruik het bijschrift om de afbeelding te koppelen aan het argument of het bewijs.
8. Specificeer consistent. Gebruik dezelfde representatieve afbeelding in de pagina, de sociale metadata en de gestructureerde data.

Doe de overdrachtstest voor afbeeldingen

Stel voor publicatie vijf vragen:

1. Wat neemt de beoogde bezoeker aan na het zien van deze afbeelding?
2. Ondersteunt die aanname de waarheid in de tekst?
3. Laadt de afbeelding snel op een normale mobiele verbinding?
4. Kan iemand die de afbeelding niet kan zien het doel ervan begrijpen via de alt-tekst?
5. Krijgen zoekmachines en sociale platforms een relevante preview op het juiste formaat?

Als het antwoord op een van deze vragen nee is, gaat het niet alleen om visueel ontwerp of websiteonderhoud. De overdracht is dan onvolledig.

Goede communicatie verbindt elke laag

Een heldere briefing kan nog steeds het verkeerde materiaal opleveren. Een sterk visiedocument kan ongezien blijven. Een mooie website kan traag laden, het sterkste bewijs verbergen, of de bezoeker naar de verkeerde conclusie leiden.

Goede communicatie verbindt strategie, bewijs, woorden, beeld, technologie, verspreiding en de volgende actie.

Daarom kan het vervangen van één foto ertoe doen. Goed gedaan maakt het de pagina lichter, het bewijs sterker, de boodschap makkelijker te ontvangen en de volgende beslissing makkelijker te nemen.