# Hero-achtergrond voor je website: rijke verlopen die snel laden [Canonical HTML page](https://gradiently.design/nl/guide/website-hero-background) In de hero maakt een site zijn eerste indruk, en daar wordt hij ook het vaakst traag. Een hero met kleurverloop kan tegelijk het rijkste en het lichtste onderdeel van de pagina zijn, als je hem op de juiste manier bouwt. ## The short version - Een hero-achtergrond is de afbeelding, het kleurverloop of de video achter de eerste sectie van een webpagina, en vaak het element dat bepaalt hoe snel de pagina aanvoelt. - Pure CSS-gradients voegen bijna niets toe aan de download en schalen perfect naar elk scherm, en dat maakt ze de snelste hero-achtergrond. - Hero’s met een afbeelding horen een master van 1920 bij 1080 te gebruiken, moderne formaten zoals AVIF of WebP en responsieve groottes, en mogen nooit lazy worden geladen. - Hero’s met video hebben een posterafbeelding nodig, gedempte inline autoplay en een stilstaand alternatief voor mensen die minder beweging willen. - Wat de achtergrond ook is, de kop heeft op elk schermformaat een rustig vlak met sterk contrast nodig. Een **hero-achtergrond** is het kleurverloop, de afbeelding of de video achter de eerste sectie van een webpagina. Hij bepaalt de sfeer van de hele site, en omdat hij het grootste is wat zichtbaar is wanneer de pagina opent, bepaalt hij vaak hoe snel de pagina aanvoelt. De snelste optie is een pure CSS-gradient, die als een paar regels tekst wordt gedownload en op elke grootte scherp blijft. Afbeeldingen en video kunnen rijker ogen, maar vragen om zorgvuldige formaten, bestandstypen en laadinstellingen, die hieronder aan bod komen. Deze gids vergelijkt de drie benaderingen en behandelt daarna formaten, responsieve uitsneden, code en het contrast van de kop. Voor de prestatiedetails erachter lees je [prestaties van CSS-gradients](https://gradiently.design/nl/guide/css-gradient-performance) en [video-achtergronden op websites](https://gradiently.design/nl/guide/video-background-website). ## CSS, afbeelding of video: een hero-achtergrond kiezen | Aanpak | Downloadgewicht | Uiterlijk | Het best voor | | --- | --- | --- | --- | | CSS-gradient | Bijna niets: onderdeel van je stylesheet | Vloeiende kleur, gloed, zachte meshes | Snelle sites, productpagina’s, merken die op kleur zijn gebouwd | | Afbeelding (AVIF, WebP, JPEG) | Gemiddeld: hangt af van grootte en formaat | Alles: textuur, fotografie, korrel | Rijke materialen, foto’s, complexe kunst | | Video | Zwaar: meestal het grootste bestand op de pagina | Beweging, diepte, sfeer | Lanceringen en merken waar beweging het punt is | | WebGL of canvas | Script plus renderkosten | Live, interactieve kleur | Paradepagina’s met een prestatiebudget ervoor | Begin bovenaan en ga alleen omlaag als het ontwerp echt nodig heeft wat de volgende optie toevoegt. De hero bevat meestal de Largest Contentful Paint van de pagina, het moment waarop de hoofdinhoud verschijnt. web.dev beschouwt een [LCP](https://web.dev/articles/lcp) van 2,5 seconden of minder als goed. Een zware hero-afbeelding of video is de meest voorkomende reden dat een pagina dat niet haalt, en daarom is de lichtste optie die de look bereikt bijna altijd de juiste. ## Een hero met CSS-gradient bouwen Met twee of drie gestapelde kleurverlopen kom je verrassend ver: een lineair basisverloop voor de algemene richting, en daarna zachte radiale gloed voor licht. Meng in OKLCH om sterke kleuren levendig te houden. Het resultaat wordt direct getekend en heeft nooit een groter bestand nodig voor grotere schermen. ```css .hero { min-height: min(92svh, 900px); display: grid; place-items: center; padding: clamp(4rem, 10vw, 8rem) 1.5rem; color: #fbf8ff; background-color: #1b1240; /* fallback while gradients paint */ background-image: radial-gradient(ellipse 60% 50% at 78% 18%, oklch(0.72 0.19 350 / 0.75), transparent 70%), radial-gradient(ellipse 55% 45% at 15% 85%, oklch(0.62 0.17 250 / 0.7), transparent 70%), linear-gradient(160deg in oklch, #1b1240, #3a1d78 55%, #120c2c); } .hero h1 { max-width: 16ch; font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1.04; text-align: center; text-wrap: balance; } ``` Een gelaagde CSS-hero: twee gloedlagen over een basisverloop, met een egale terugvalkleur. Hij weegt een paar honderd bytes en vult elk scherm. Hero-gloed, benaderd in één laag: `radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)` De roze gloed en de diepviolette ondergrond uit de code hierboven, getekend als één radiaal verloop zodat je de sfeer kunt zien. Om te voorkomen dat een CSS-hero op een standaardpreset lijkt, voeg je textuur toe. Een fijne SVG-ruislaag over het verloop verbergt banding op grote schermen en geeft de kleur een materiaalgevoel; [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture) laat zien hoe. Voor rijkere kleur met meerdere punten stapelen [CSS mesh gradients](https://gradiently.design/nl/guide/css-mesh-gradient) meer gloedlagen. ## Formaat en bestandstypen voor een hero-afbeelding Heeft de hero een afbeelding nodig, maak dan een master van 1920 bij 1080 en exporteer kleinere versies voor kleinere schermen. Lever moderne formaten: AVIF en WebP zijn meestal veel kleiner dan JPEG bij dezelfde visuele kwaliteit, met JPEG als terugval. Laad de hero direct en vertel de browser dat hij belangrijk is. ```html ``` Een responsieve hero-afbeelding: moderne formaten eerst, expliciete afmetingen om verschuiving van de lay-out te voorkomen, `fetchpriority="high"` en geen `loading="lazy"`. Een lege alt-tekst markeert hem als decoratief. > **Laad de hero nooit lazy** `loading="lazy"` stelt afbeeldingen uit tot ze dicht bij de viewport zijn. De hero staat al in de viewport, dus lazy laden laat de hoofdinhoud van de pagina alleen maar later verschijnen. ## Responsieve uitsneden voor hero-achtergronden Een hero van 16:9 wordt op een telefoon een hoge, smalle strook. Met `object-fit: cover` snijdt de browser standaard vanuit het midden, wat het deel dat ertoe doet kan wegsnijden. Stel `object-position` in om het brandpunt te behouden, of lever een aparte, hogere uitsnede voor kleine schermen met een `media`-attribuut op een `source`. - Desktop 16:9: 1920 × 1080 - Tablet, ongeveer 4:3: 1600 × 1200 - Telefoon, hoog: 1080 × 1920 Dezelfde hero in drie vormen. Kleurverlopen passen zich vanzelf aan; afbeeldingen hebben een gekozen brandpunt of een aparte uitsnede voor telefoons nodig. Hier blinken CSS-gradients uit: gloed wordt in percentages geplaatst, dus die beweegt mee met de vorm. Je kunt posities ook op een breekpunt veranderen, bijvoorbeeld door de belangrijkste gloed te verplaatsen van rechtsboven op desktop naar middenboven op telefoons, waar de kop wordt gestapeld. ## Contrast van de kop op een hero-achtergrond ### Vermijd - Een kop die door de helderste gloed loopt - Contrast alleen op desktop gecontroleerd - Een donkere overlay over het hele beeld om tekst te redden - Tekst met weinig contrast op een verloop in middentonen ### Doe - Gloed weg van de kop geplaatst - Contrast gecontroleerd op elk breekpunt - Een zachte scrim alleen waar de woorden staan - Duidelijk donker of duidelijk licht achter de tekst Controleer het contrast op het lichtste punt achter de kop, niet het gemiddelde, en mik op minstens 4,5:1 voor kleinere tekst en 3:1 voor grote koppen. [Tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) behandelt de methode, en [tekst op een afbeelding](https://gradiently.design/nl/guide/text-over-image) behandelt hero’s met foto’s. Ontwerp je de hero in Gradiently, dan tekent een Mark live op 1920 bij 1080 of elk eigen formaat en verplaatst hij zijn rustigste gebied achter je woorden. Exporteer een PNG of JPEG tot drie keer het formaat van het ontwerp voor scherpe beelden op schermen met hoge dichtheid, of een loop van 5 tot 30 seconden voor een video-hero. Denk aan dezelfde look voor je [Open Graph-afbeelding](https://gradiently.design/nl/guide/open-graph-image-size), zodat gedeelde links bij de pagina passen. ## FAQ ### Welk formaat moet een hero-achtergrondafbeelding hebben? Maak een master van 1920 bij 1080 en lever kleinere versies aan kleinere schermen met `srcset`. Gebruik AVIF of WebP met JPEG als terugval. ### Is een CSS-gradient sneller dan een hero-afbeelding? Ja. Een CSS-gradient is een paar regels in je stylesheet zonder extra download, en hij blijft op elke grootte scherp. Afbeeldingen en video voegen bestanden toe die moeten laden voordat de hero af oogt. ### Moet ik mijn hero-afbeelding lazy laden? Nee. De hero is zichtbaar wanneer de pagina opent, dus lazy laden vertraagt hem alleen. Laad hem direct, voeg `fetchpriority="high"` toe en stel de breedte en hoogte in. ### Hoe houd ik een hero-kop leesbaar? Plaats heldere vlakken weg van de woorden, gebruik zo nodig een zachte scrim alleen achter de kop, en controleer het contrast op elk schermformaat.