Een koper uit de maakindustrie komt op je website en ziet een hero-afbeelding van een strak SaaS-dashboard. Een fintechprospect komt binnen en krijgt dezelfde afbeelding. Geen van beiden heeft het gevoel dat de pagina voor hen is gemaakt, en beiden vertrekken binnen enkele seconden. Het probleem is niet dat landingspagina's geen afbeeldingen hebben. Het probleem is dat iedereen dezelfde afbeeldingen ziet, ongeacht wie ze zijn of wat ze nodig hebben.
Afbeeldingen op landingspagina's worden één keer gekozen, meestal door degene die de pagina ontwierp, en daarna aan elke bezoeker getoond. Op een B2B-site met meerdere branches en koperrollen betekent dat dat de meeste bezoekers een plaatje uit de wereld van iemand anders zien. De hoofdafbeelding afstemmen op de branche, rol of fase van de bezoeker is een van de goedkopere vormen van personalisatie, omdat er geen nieuwe tekst voor nodig is, maar het helpt alleen als de afbeelding iets specifieks zegt. Dit artikel behandelt waarvoor elk type afbeelding dient, wanneer video de moeite waard is, hoe je beeld aan segmenten koppelt en welke details rond performance en toegankelijkheid bepalen of het allemaal werkt.
Waarom generieke afbeeldingen op landingspagina's in B2B niet werken
Beelden zijn meestal het eerste waar het oog van een bezoeker op valt, dus ze bepalen de eerste indruk nog voordat de kop gelezen is. Een generiek beeld doet op zich weinig kwaad; de kosten zitten in de gemiste kans om de bezoeker iets te laten zien wat hij herkent.
Voor B2B-bedrijven met meerdere buyer persona's is één set afbeeldingen een structureel nadeel. Een VP Engineering die je platform beoordeelt, heeft andere visuele verwachtingen dan een CMO die hetzelfde doet. De een wil technische architectuur, integraties of datastromen zien. De ander reageert op dashboards, campagnemetrics of ROI-grafieken. Als beiden dezelfde algemene kantoorfoto zien, krijgt geen van beiden het relevantiesignaal dat ze laat doorscrollen. Hetzelfde geldt voor de advertentie die hen binnenbracht; onze gids over wanneer je responsieve displayadvertenties gebruikt behandelt hoe je displaycreatie consistent houdt met de pagina.
Stockfoto's van mensen die elkaar de hand schudden in een glazen kantoor zijn de gebruikelijke boosdoener. Ze zijn makkelijk als stock te herkennen, voegen dus niets toe, en nemen de plek in waar een productscreenshot, een echte klant of een schema van de workflow had kunnen staan. Test je één ding aan de visuals van een landingspagina, test dan een echte afbeelding (je product, je klanten, je team) tegen de stockfoto.
Beeld afstemmen op bezoekerssegmenten
Het idee achter gepersonaliseerde afbeeldingen is de tijd tussen binnenkomst en "dit is voor mij" te verkorten. De praktische manier is beeldvarianten te koppelen aan segmenten die je al volgt. Gebruik je bezoekersidentificatie om de branche, grootte of regio van een bedrijf te bepalen, dan kunnen diezelfde gegevens bepalen welke afbeeldingen op de pagina verschijnen.
Manieren om segmenten aan afbeeldingen te koppelen:
Beelden per branche. Toon een fabrieksvloer aan bezoekers uit de maakindustrie. Toon een handelsdesk aan financiële dienstverleners. Toon een ziekenhuisworkflow aan de zorg. Het product dat je verkoopt is hetzelfde, maar de visuele context verandert mee met de dagelijkse realiteit van de bezoeker.
Visuals per rol. Technische kopers reageren op architectuurdiagrammen, codevoorbeelden en integratiestromen. Zakelijke kopers reageren op dashboards, grafieken en resultaatmetrics. De beeldtaal afstemmen op de expertise van de koper laat zien dat je zijn perspectief begrijpt.
Beelden per fase. Nieuwe bezoekers hebben baat bij illustraties van de voordelen op hoofdlijnen die duidelijk maken wat je doet. Terugkerende bezoekers die al productcontent hebben gezien, reageren beter op gedetailleerde screenshots, vergelijkingstabellen of bewijspunten van klanten.
Bedrijfsomvang. Enterprisebezoekers reageren mogelijk op beelden die schaal, securitycertificeringen of workflows met meerdere teams laten zien. Kleinere bedrijven voelen zich aangesproken door beelden van snelheid, eenvoud en snelle successen.
Soorten afbeeldingen en wanneer elk het beste werkt
Verschillende visuele elementen hebben verschillende functies op een landingspagina. Als je die verschillen begrijpt, kun je bewust kiezen wat je personaliseert en wat je statisch houdt.
Hero-afbeeldingen bepalen de eerste indruk en kaderen de hele waardepropositie. Ze nemen de waardevolste ruimte op de pagina in. Een hero die het product in gebruik laat zien, liefst met data of in een omgeving die de bezoeker herkent, zegt meer dan een abstracte illustratie. Op gepersonaliseerde pagina's is de hero het logische eerste element om te variëren, omdat iedereen die binnenkomt hem ziet.
Productscreenshots zijn concreet bewijs van wat je verkoopt, maar ze kunnen pagina's rommelig maken als je ze achteloos gebruikt. Eén screenshot met annotaties die de features voor de use case van de bezoeker uitlicht, werkt beter dan meerdere zonder annotaties. Vertelt je segmentatiedata dat een bezoeker om analytics geeft, toon dan het analyticsdashboard. Draait het om integraties, toon dan het integratiepaneel.
Illustraties en eigen graphics zijn uitstekend om complexiteit te vereenvoudigen. Als je een abstracte workflow of een proces met meerdere stappen moet uitleggen, brengen eigen illustraties in seconden over waar je anders alinea's voor nodig hebt. Ze zijn vooral nuttig op gepersonaliseerde pagina's waar de uitleg moet meebewegen met de technische kennis van de bezoeker. Noteer in de copybrief voor de landingspagina welke visual elke sectie nodig heeft, zodat design en copy samen worden gepland.
Social-proofafbeeldingen zijn onder meer klantlogo's, teamfoto's en thumbnails van cases. Die kun je personaliseren door logo's te tonen uit de branche of grootteklasse van de bezoeker. Een middelgroot SaaS-bedrijf dat logo's van andere middelgrote SaaS-bedrijven ziet, voelt zich meer gerustgesteld dan bij Fortune 500-logo's waar het zich niet in herkent. Onze voorbeelden van B2B-landingspagina's laten zien met welk bewijselement elk paginatype moet openen.
Achtergrondafbeeldingen creëren sfeer zonder aandacht op te eisen. Subtiele verlopen of geometrische patronen werken vaak beter dan fotografische achtergronden, omdat ze diepte toevoegen zonder af te leiden. Ze hoeven zelden gepersonaliseerd te worden, omdat hun rol is te ondersteunen, niet om relevantie uit te stralen.
Video op een landingspagina: wanneer het zijn plek verdient
Video is het zwaarste beeldelement dat je kunt toevoegen, qua paginagewicht en qua aandacht die het vraagt. Onze visie: een video op een landingspagina moet één vraag beantwoorden die de bezoeker niet uit een screenshot kan halen, meestal "hoe ziet het eruit als iemand dit echt gebruikt?" Herhaalt de video de kop met muziek eronder, dan doet een goed gekozen screenshot hetzelfde werk sneller. Voor video buiten landingspagina's, zie onze gids voor B2B-videomarketing.
Waar video op B2B-pagina's meestal loont:
- Productwalkthroughs op demo- en aanmeldpagina's. Zestig tot negentig seconden die de kernworkflow laten zien, stellen een bezoeker in staat zichzelf te kwalificeren voordat hij een gesprek boekt. Beweeg de cursor rustig en houd de interface leesbaar op het formaat waarin hij wordt afgespeeld.
- Klantverhalen op pagina's laat in de funnel. Een klant die het probleem in eigen woorden uitlegt, is bewijs dat een logo niet kan geven. Plaats het naast de claim die het ondersteunt, niet in een aparte videogalerij.
- Webinar- en evenementpagina's. Een clip van 30 seconden met de spreker laat zien dat de sessie de tijd waard is. Na het evenement vervangt de opname die clip.
En waar het meestal niet werkt: als automatisch afspelende achtergrondloop achter de kop (die concurreert met de tekst en kost laadtijd), en als enige manier om belangrijke informatie te krijgen (veel B2B-bezoekers browsen op het werk zonder geluid).
Video toevoegen zonder de pagina te vertragen
- Gebruik een posterafbeelding en laad de speler bij een klik. Een volledige YouTube- of Vimeo-embed laadt zijn scripts voordat iemand op play drukt. De Lighthouse-documentatie van Google raadt aan om embeds van derden lazy te laden achter een facade, een statische preview die bij interactie de echte speler inlaadt.
- Laad embeds onder de vouw lazy. Door
loading="lazy"aan iframes toe te voegen, worden spelers buiten beeld uitgesteld, zoals beschreven in de gids van web.dev over lazy loading van iframes. - Ondertitel alles. Ondertitels helpen kijkers zonder geluid en zijn een toegankelijkheidseis voor vooraf opgenomen video met audio.
- Houd de CTA zichtbaar zonder de video. Het formulier of de knop mag nooit afhangen van iemand die tot het einde kijkt.
Meten of de video helpt
De verbeterde meetfunctie van GA4 registreert de events video_start, video_progress en video_complete voor ingesloten YouTube-video's waarvoor JS API-ondersteuning is ingeschakeld. Twee getallen zijn belangrijker dan weergaven: de afspeelratio (aantal keer afgespeeld gedeeld door paginabezoekers) en de conversieratio van bezoekers die de video afspeelden tegenover bezoekers die dat niet deden. Wees voorzichtig met dat tweede getal. Bezoekers die op play drukken zijn al meer betrokken, dus een hogere conversieratio onder kijkers bewijst niet dat de video die veroorzaakte. De eerlijke test is een A/B-test van de pagina met en zonder video, beoordeeld op conversies, niet op kijktijd.
Video laat zich ook goed personaliseren. Een bezoeker uit de maakindustrie en een bezoeker uit de softwarebranche kunnen dezelfde walkthrough zien, opgenomen met twee verschillende demodatasets, wat goedkoper is dan het klinkt zodra het script er is.
Visuele hiërarchie op gepersonaliseerde pagina's
Afbeeldingen bepalen hoe bezoekers zich door een pagina bewegen. Op pagina's met veel tekst scannen mensen meestal over de bovenkant en dan langs de linkerkant naar beneden (het F-patroon); op sobere pagina's zigzagt het oog vaak van linksboven naar rechtsboven en naar beneden. Plaats afbeeldingen met die paden in gedachten.
Plaats je gepersonaliseerde hero-afbeelding bovenaan de F, waar de ogen het eerst landen. Ondersteunende visuals komen langs het verticale scanpad. Gebruik je richtinggevende elementen in beelden, zoals de blik van een persoon of een pijl in een diagram, laat ze dan naar je call-to-action wijzen in plaats van ervan af.
Grootte creëert hiërarchie. Grotere afbeeldingen geven belang aan. Wil je dat een bezoeker van een targetaccount zich op een specifiek resultaat of een specifieke mogelijkheid richt, maak die afbeelding dan het dominante beeld op de pagina. Secundaire afbeeldingen, zoals klantlogo's of ondersteunende screenshots, moeten kleiner blijven, zodat ze versterken zonder te concurreren.
Geef de hoofdafbeelding ruimte. Eén duidelijke, op het segment afgestemde afbeelding met ruimte eromheen leest sneller dan drie krappe afbeeldingen die om aandacht strijden, en het is één variant om te onderhouden in plaats van drie.
Een stapsgewijze workflow om afbeeldingen op landingspagina's te personaliseren
Voor beeldpersonalisatie hoef je niet je hele site opnieuw te bouwen. Hier is een praktische workflow die klein begint en opschaalt.
Stap 1: kies je grootste gekwalificeerde segmenten. Haal data uit je analytics of je tool voor bezoekersidentificatie. Welke branches, bedrijfsgroottes of rollen vormen het grootste deel van je gekwalificeerde verkeer? Begin met segmenten die groot genoeg zijn om te meten en verschillend genoeg dat andere afbeeldingen echt zinvol zijn.
Stap 2: controleer de beelden op je huidige landingspagina's. Maak een lijst van elk beeld op je landingspagina's met het meeste verkeer. Vraag bij elk beeld: spreekt dit alle drie de segmenten evenveel aan? Zo ja, dan is het een sterk universeel beeld of een generiek beeld dat niemand aanspreekt. Markeer beelden waarbij een segmentspecifieke variant relevantie kan toevoegen.
Stap 3: maak 2-3 afbeeldingsvarianten per gemarkeerd slot. Je hebt geen volledig herontwerp nodig. Voor hero-afbeeldingen kan dat drie versies van dezelfde lay-out betekenen met een andere achtergrond, andere productscreenshots of andere illustraties van use cases. Houd de compositie en de plaats van de CTA gelijk, zodat je de inhoud van de afbeelding test en niet de paginastructuur.
Stap 4: stel weergaveregels per segment in. Koppel in je personalisatieplatform elke variant aan het bijbehorende doelsegment. Bepaal een standaardversie voor bezoekers die in geen enkel segment vallen. Controleer of de juiste afbeeldingen bij de juiste bezoekers verschijnen door een voorvertoning te bekijken met testaccounts uit elk segment.
Stap 5: meten en bijsturen. Volg de conversieratio per segment, niet alleen in totaal. Een hero-afbeelding die de conversie voor bezoekers uit de maakindustrie verhoogt, kan de prestaties voor SaaS-bezoekers schaden. Voer A/B-tests uit binnen elk segment om het effect van afbeeldingswijzigingen te scheiden van andere pagina-elementen. Bepaal de steekproefgrootte voordat de test start (onze gids over de steekproefgrootte voor A/B-tests laat zien hoe), laat minstens twee volle weken lopen en stop niet vroegtijdig omdat het dashboard er goed uitziet.
Technische prestaties: snelheid vs beeldkwaliteit
Een gepersonaliseerde hero die te laat verschijnt, is slechter dan een generieke die op tijd verschijnt. De hero-afbeelding is vaak het Largest Contentful Paint-element, dus de grootte en laadvolgorde bepalen hoe snel de pagina aanvoelt.
Gebruik moderne formaten. Volgens de documentatie van Google zijn lossy WebP-afbeeldingen 25-34% kleiner dan vergelijkbare JPEG's en lossless WebP-afbeeldingen 26% kleiner dan PNG's. AVIF comprimeert vaak nog verder. Lever AVIF of WebP met een JPEG-fallback via het element <picture>.
Kopieer niet de groottelimieten van een ander, maar stel een budget op voor je eigen pagina's: controleer de bestandsgrootte en LCP van de hero in PageSpeed Insights met een mobiel profiel en behandel elke variant die merkbaar zwaarder is dan de standaardversie als een bug.
Gebruik responsieve afbeeldingen met srcset-attributen. Een afbeelding van 2000px breed naar een mobiele bezoeker sturen verspilt bandbreedte en vertraagt het renderen. Laat browsers de juiste afbeeldingsgrootte kiezen op basis van de breedte van de viewport. Voor gepersonaliseerde pagina's betekent dit dat elke afbeeldingsvariant een eigen set responsieve formaten nodig heeft, maar buildtools kunnen dat automatiseren.
Laad de hero niet lazy. Hij staat boven de vouw, dus lazy loading vertraagt hem; markeer hem in plaats daarvan met fetchpriority="high" en laad alleen afbeeldingen verder naar beneden lazy. Voor segmentvarianten is de netste opzet dat de variant op de server of aan de edge wordt bepaald, zodat de juiste afbeelding vanaf het begin in de HTML staat. Gebeurt de wissel aan de clientkant, reserveer dan de afmetingen van de afbeelding zodat de layout niet verspringt als hij laadt.
Toegankelijkheid voor alle afbeeldingsvarianten
Elke gepersonaliseerde afbeeldingsvariant heeft een eigen alt-tekst nodig. Een hero-afbeelding van een productieworkflow moet een alt-tekst hebben die die scène beschrijft, geen algemene alt-tekst die op elke variant van toepassing kan zijn. Schermlezers lezen voor wat er op de pagina staat, en de alt-tekst moet overeenkomen met wat ziende bezoekers in dat segment echt zien.
Goede alt-tekst beschrijft de inhoud van de afbeelding beknopt en relateert die aan de context eromheen. Houd hem onder de 100 tekens. Decoratieve afbeeldingen (achtergronden, opvulling) krijgen een leeg alt-attribuut, zodat schermlezers ze overslaan. Functionele afbeeldingen zoals gelinkte afbeeldingen hebben alt-tekst nodig die de bestemming van de link beschrijft.
Als een afbeelding niet laadt, wordt de alt-tekst zichtbaar getoond. Alt-tekst dient dus ook als terugvaloptie voor ziende bezoekers met een trage verbinding. Heb je gepersonaliseerde afbeeldingsvarianten, dan is dat nog een reden waarom elke variant een unieke, beschrijvende alt-tekst nodig heeft in plaats van een gedeelde placeholder.
Veelgemaakte fouten met gepersonaliseerde beelden
Teams die net beginnen met beeldpersonalisatie, personaliseren vaak te veel. Elke afbeelding op de pagina wisselen op basis van het bezoekerssegment levert een onderhoudslast op en verwatert de impact van de wijzigingen die er echt toe doen. Richt personalisatie op de een of twee beeldplekken met de meeste impact (meestal de hero en het belangrijkste social-proofblok) en houd de rest gelijk.
Een andere veelgemaakte fout is segmentdata gebruiken voor aannames die opdringerig aanvoelen. Een bezoeker zijn bedrijfslogo laten zien voordat hij zich heeft bekendgemaakt, gaat over een grens. Beelden tonen die relevant zijn voor zijn branche, helpt. Zijn kantoorgebouw tonen is verontrustend. Het verschil zit tussen contextuele relevantie en surveillance.
Te veel varianten tegelijk testen is een derde valkuil. Vier segmenten maal drie afbeeldingsslots, met elk een paar varianten, levert al tientallen combinaties op, veel meer dan B2B-verkeer kan testen. Test binnen elk segment één variabele tegelijk, wacht op statistische significantie, en bouw vertrouwen op in elke wijziging voordat je er meer bovenop stapelt.
Voor teams die een breder plan voor optimalisatie van B2B-landingspagina's uitvoeren, is personalisatie van beelden een redelijke vroege stap, omdat het minder nieuwe content vraagt dan tekstpersonalisatie. Het addertje is dat het afhangt van echt, segmentspecifiek beeldmateriaal; kun je alleen een andere stockfoto per branche maken, besteed de tijd dan liever aan tekst.
Waar je begint
Neem je landingspagina met het meeste verkeer en bekijk de hero-afbeelding met één vraag: zou een bezoeker uit je grootste segment zijn eigen werk erin herkennen? Zo niet, vervang hem dan door een productscreenshot of klantafbeelding die hij wel herkent, en test die tegen de huidige. Pas als een echte afbeelding de stockfoto verslaat, loont het om varianten per segment te maken. Markettailor koppelt data uit bezoekersidentificatie aan content op de pagina, inclusief afbeeldingen, als je die varianten wilt tonen zonder zelf de regels te bouwen.
