Hero image

Je opent een website en binnen een seconde weet je: dit voelt goed, of dit voelt rommelig. Die eerste indruk wordt bijna altijd bepaald door één visueel element bovenaan de pagina.

Dat element heet een hero image: de grote afbeelding of visual die je ziet zodra een pagina laadt, nog voor je begint te scrollen. Hieronder ontdek je waarom hij belangrijk is, welke afmetingen werken en hoe je voorkomt dat hij je laadtijd kapotmaakt.

TL;DR:

Een mooie hero image is niet genoeg. Visuele impact, snelle laadtijd en een duidelijke boodschap moeten samengaan. Anders kost hij je bezoekers in plaats van conversies.

Waarom een hero image bepaalt of bezoekers blijven

Bezoekers beslissen in minder dan 3 seconden of ze blijven of wegklikken. De hero image is het eerste wat ze zien, samen met je titel en knop. Dat maakt ‘m tot het belangrijkste stuk vastgoed van je homepage of landingspagina.

Een sterke hero image vertelt in één oogopslag wie je bent, wat je doet en voor wie. Hij ondersteunt je waardepropositie zonder dat de bezoeker hoeft te lezen. Mis je dat momentum, dan stijgt je bouncepercentage zichtbaar.

Bovenaan de pagina, boven de vouw, gelden andere regels dan in de rest van je site. Alles moet samenwerken: beeld, tekst, knop en witruimte. Concurreren ze met elkaar, dan verlies je de aandacht meteen.

De juiste afmetingen en bestandsformaten voor je hero image

Een hero image moet er scherp uitzien op elk scherm, van een 27-inch monitor tot een smartphone. Werk daarom met responsive afbeeldingen en lever per schermbreedte een aangepaste versie via het srcset-attribuut.

Voor desktop werkt een breedte van 1920 tot 2560 pixels goed, met een hoogte tussen 800 en 1080 pixels. Voor mobiel snijd je liefst een aparte versie aan, zodat je niet onnodig grote bestanden naar trage 4G-verbindingen stuurt.

Qua formaat kies je WebP of AVIF in plaats van JPG of PNG. Die moderne formaten leveren tot 50% kleinere bestanden bij gelijke kwaliteit. Hou de uiteindelijke bestandsgrootte onder de 200 KB, zeker voor mobiel.

Desktop: 1920–2560 px breed, WebP of AVIF
Tablet: 1024–1280 px breed
Mobiel: 768 px breed, apart bijgesneden
Bestandsgrootte: liefst onder 200 KB
Voorzie altijd een beschrijvende alt-tekst

Hero image en Core Web Vitals: pas op voor LCP

De hero image is in 9 van de 10 gevallen het Largest Contentful Paint-element van je pagina. Google meet hoe snel dit element zichtbaar wordt en gebruikt die score als rankingfactor. Een trage hero kost dus niet alleen bezoekers, maar ook posities.

Gebruik geen lazy loading op je hero image. Dat lijkt logisch, maar het vertraagt juist de LCP. Voeg in plaats daarvan fetchpriority='high' toe en preload de afbeelding via een <link rel='preload'> in de <head>.

Meer technische richtlijnen vind je op web.dev over LCP-optimalisatie. Wil je dieper in de techniek duiken, lees dan ook onze pagina over frontend ontwikkeling.

Veelgemaakte fout: een prachtige stockfoto van 4 MB als hero gebruiken. De pagina ziet er top uit, maar laadt 6 seconden. Tegen die tijd is de helft van je bezoekers weg.

Tekst, contrast en CTA: zo laat je je hero image converteren

De afbeelding alleen verkoopt niets. De combinatie met een heldere kop en knop doet het werk. Hou je headline kort (5 tot 10 woorden) en plaats er één duidelijke call-to-action onder, niet drie naast elkaar.

Let op het contrast tussen tekst en achtergrond. Een drukke foto met witte tekst eroverheen leest niet. Voeg een donkere overlay toe of kies een rustig deel van de afbeelding voor je tekstvlak. WCAG raadt een contrastverhouding van minstens 4.5:1 aan voor leesbaarheid en toegankelijkheid.

Test ook varianten. Een ander beeld, een andere hoofding of een andere knopkleur kan je conversie met tientallen procenten verhogen. Wat op de ene landingspagina werkt, hoeft niet op de andere te werken.

Lees ook: hoe een landing page werkt en wat een sterke homepage onderscheidt.

Open je website nu in een incognitovenster op je smartphone via een trage verbinding. Laadt je hero image binnen 2,5 seconden en is je boodschap meteen duidelijk? Zo niet, dan weet je waar je morgen begint.

Mogen we je omverblazen?

Website laten maken

Online marketing uitbesteden

Geschreven door

Bjorn

Bjorn is de man die alles achter de schermen laat werken. Als Technical Lead zorgt hij voor stabiele koppelingen, slimme automatisaties en zorgt hij dat de back-end stevig staat. Van API’s tot maatwerk flows: hij houdt het overzicht, duikt in de code en lost technische uitdagingen op voor ze problemen worden.

Gerelateerde termen over "Website"

Team van digitale experten binnen Conversal

Klaar om kennis te maken?

We blazen je niet omver met loze beloftes, maar met strategie, creativiteit en bewezen impact. Ontdek wat we samen voor jouw business kunnen betekenen.

Bekijk onze cases

Contacteer ons