Hoe groot moet een hero section zijn? Hoogte, beeldgrootte en wanneer je hem kleiner maakt

Kort samengevat

• Laat de hero het grootste deel van het eerste scherm vullen, niet alles. Een strookje van de volgende sectie vertelt bezoekers dat er meer volgt.
• Ontwerp voor de schermen die mensen gebruiken: 1920 bij 1080 is de meest gebruikte desktopresolutie, goed voor 27,8 procent van de weergaven volgens StatCounter voor oktober 2026.
• Stel de hoogte in met viewport-eenheden zoals svh, niet met vaste pixels. Laat op smartphones de inhoud de hoogte bepalen.
• Het herobeeld is meestal het traagste element op de pagina: beelden zijn het grootste element op 76 procent van de mobiele pagina’s, volgens de Web Almanac 2025. Hou het licht en laad het nooit lazy.

Wat is de grootte van een hero section?

De grootte van een hero section is de hoogte en breedte van het eerste blok op een pagina: de kop, de regel eronder, de knop en meestal een beeld. De breedte is bijna altijd die van het scherm. De hoogte is de echte keuze, want die bepaalt wat er nog boven de vouw past.

Er bestaat geen standaardgrootte in pixels. Schermen verschillen te veel voor één getal. Wat je instelt, is een deel van het scherm, plus een beeldgrootte die scherp blijft op de schermen van je bezoekers.

Ken je de term nog niet, dan legt de gids over wat een hero section is uit welke vier dingen hij in vijf seconden moet zeggen.

De schermen waarop je hero moet passen

Je hero verschijnt op het scherm dat de bezoeker toevallig heeft. Dit zijn drie van de meest gebruikte desktop- en mobiele resoluties in de wereldwijde data van StatCounter voor oktober 2026, in CSS-pixels, met de beeldbreedte die elk ervan nodig heeft.

Scherm	Aandeel in weergaven	Breedte van het herobeeld
Desktop 1920 × 1080	27,8% van desktop	1920 px
Desktop 1536 × 864	9,1% van desktop	1536 px
Desktop 1366 × 768	7,5% van desktop	1366 px
Smartphone 414 × 896	12,7% van mobiel	828 px (2× dichtheid)
Smartphone 360 × 800	8,6% van mobiel	720 px (2× dichtheid)
Smartphone 390 × 844	5,3% van mobiel	780 px (2× dichtheid)

De schermhoogte is niet de hoogte die je hero krijgt. De tabbladen en adresbalk van de browser en het besturingssysteem nemen een deel in, dus de zichtbare ruimte is altijd kleiner. 1536 × 864 is een scherm van 1920 × 1080 met 125 procent schaling, wat Windows-laptops vaak gebruiken.

Smartphones geven CSS-pixels door, maar de meeste tekenen twee of drie apparaatpixels per CSS-pixel. Daarom heeft een beeld op een smartphone ongeveer twee keer zijn CSS-breedte nodig om scherp te ogen.

Hoe hoog moet een hero section zijn?

Drie hoogtes komen vaak voor. Elk past bij een ander soort pagina.

• Volledig scherm (100 procent van de viewport). De hero vult het eerste scherm en verder is er niets te zien. Best voor een product met één sterk beeld, zoals een camera of een auto. Nadeel: de pagina kan af lijken, waardoor bezoekers niet scrollen.
• Het grootste deel van het scherm (70 tot 90 procent). De hero domineert en de bovenkant van de volgende sectie piept onderaan tevoorschijn. Best voor de meeste SaaS-, dienst- en campagnepagina’s. Nadeel: je moet hem controleren op een laag laptopscherm én op een hoge monitor.
• Hoogte van de inhoud. De hero is zo hoog als zijn kop, subregel, knop en beeld, met wat witruimte. Best voor smartphones en pagina’s waar de tekst het werk doet. Nadeel: op een grote monitor kan hij mager ogen, tenzij het beeld gewicht heeft.

Het risico van een volledig scherm is echt. Nielsen Norman Group noemt het de illusie van volledigheid: een pagina die er bij de vouw af uitziet, stopt het scrollen. De gids over boven en onder de vouw toont waarom de volgende sectie boven de lijn moet beginnen.

Hoogte kost ook aandacht. Gebruikers besteden 57 procent van hun kijktijd boven de vouw, volgens Nielsen Norman Group. Een hero die het hele eerste scherm opeist met één foto, laat in die 57 procent geen ruimte voor bewijs of de volgende stap.

Stel de hoogte in met viewport-eenheden, niet met pixels

Een vaste hoogte van bijvoorbeeld 800 pixels loopt over op een laptopscherm van 768 pixels en oogt kort op een grote monitor. Viewport-eenheden schalen mee met het scherm.

• Gebruik svh op mobiel. Mobiele browsers verbergen hun werkbalken als je scrolt, dus de viewport verandert van hoogte. web.dev legt uit dat de kleine viewport-eenheid svh het scherm meet met de werkbalken zichtbaar. Een hero van 80svh verdwijnt nooit achter de adresbalk.
• Vermijd gewone 100vh op smartphones. Die gebruikt de grote viewport, met de werkbalken verborgen. Bij het eerste laden zit de onderkant van de hero, vaak de knop, onder de werkbalk.
• Voeg een minimum en een maximum toe. Een min-height voorkomt dat de inhoud wordt afgesneden op lage schermen. Een max-height voorkomt dat de hero uitrekt op heel hoge monitors.

Hoe groot moet het herobeeld zijn?

Het herobeeld is vaak het element dat bepaalt hoe snel de pagina aanvoelt. In de Web Almanac 2025 zijn beelden het Largest Contentful Paint-element op 85,3 procent van de desktoppagina’s en 76 procent van de mobiele pagina’s. web.dev noemt een LCP van 2,5 seconden of minder goed, en maar 62 procent van de websites haalt dat op smartphones.

• Lever twee groottes of meer. Gebruik srcset zodat een smartphone een beeld van ongeveer 800 pixels breed laadt en een desktop een van ongeveer 1920 pixels.
• Gebruik een modern formaat. JPG dekt nog 57 procent van de LCP-beelden en PNG 26 procent, volgens de Web Almanac. WebP- of AVIF-bestanden zijn kleiner bij dezelfde kwaliteit.
• Laad het herobeeld nooit lazy. Ongeveer 16 tot 17 procent van de pagina’s laadt zijn LCP-beeld lazy, wat het eerste scherm vertraagt. Laad het meteen.
• Verhoog de prioriteit. Voeg fetchpriority="high" toe. In een test van web.dev op Google Flights daalde de LCP daarmee van 2,6 naar 1,9 seconden.

Wanneer je de hero kleiner maakt

Maak de hero kleiner als de bezoeker al weet waarom hij komt. Een campagnepagina voor een advertentie, een prijspagina of een productpagina voor een terugkerende koper heeft snel het aanbod en de knop nodig, geen groot beeld.

Maak hem ook op smartphones kleiner. Een scherm van 414 pixels breed heeft geen plaats voor een groot beeld naast de kop, dus stapel ze en hou de kop en de knop in het eerste scherm. Een reeks voorbeelden van hero sections toont welke homepages daarin slagen.

Wat je kiest, per type pagina

Heb je een SaaS-pagina

Gebruik het grootste deel van het scherm, ongeveer 80svh op desktop, met een screenshot van het product. Laat de eerste rij logo’s of functies onderaan binnenpiepen.

Verkoop je een dienst

Gebruik de hoogte van de inhoud. Bezoekers willen weten wat je doet en hoe ze je bereiken, dus zet de kop, een regel bewijs en de knop in het eerste scherm en laat de foto over de volle breedte weg.

Heb je een webshop

Gebruik een lagere hero op categorie- en productpagina’s, zodat producten boven de vouw verschijnen. Hou een hoge hero voor de homepage of een lancering, en check het gewicht van het beeld op een smartphone.

Veelgestelde vragen

Wat is de standaardgrootte van een hero section?

Er is geen vaste standaard. De volle breedte van het scherm en 70 tot 90 procent van de zichtbare hoogte werkt voor de meeste pagina’s. Laat op smartphones de inhoud de hoogte bepalen.

Hoe groot moet een herobeeld zijn?

Ongeveer 1920 pixels breed voor desktop, want 1920 × 1080 is het meest gebruikte desktopscherm. Lever voor smartphones een versie van ongeveer 800 pixels breed, twee keer de CSS-breedte van de meeste toestellen.

Moet een hero section het volledige scherm vullen?

Alleen als één beeld de pagina draagt. Een hero over het volledige scherm kan eruitzien als het einde van de pagina, dus de meeste pagina’s doen het beter als de volgende sectie onderaan zichtbaar is.

Wat is een goede hoogte voor een hero section op mobiel?

Zo hoog als de kop, de subregel, de knop en een klein beeld nodig hebben, en niet hoger dan het scherm. Gebruik je een viewport-eenheid, kies dan svh, zodat de knop niet onder de werkbalk van de browser verdwijnt.

Vertraagt het herobeeld mijn pagina?

Vaak wel. Beelden zijn het grootste element op 76 procent van de mobiele pagina’s, dus het herobeeld bepaalt je LCP. Lever kleinere bestanden aan smartphones, gebruik WebP of AVIF en laad het niet lazy.