Hero-achtergrond voor je website: rijke verlopen die snel laden

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 en video-achtergronden op websites.

CSS, afbeelding of video: een hero-achtergrond kiezen

De hero bevat meestal de Largest Contentful Paint van de pagina, het moment waarop de hoofdinhoud verschijnt. web.dev beschouwt een 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.

.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;
}

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 laat zien hoe. Voor rijkere kleur met meerdere punten stapelen CSS mesh gradients 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.

<picture>
  <source type="image/avif"
          srcset="/hero-960.avif 960w, /hero-1440.avif 1440w, /hero-1920.avif 1920w"
          sizes="100vw">
  <source type="image/webp"
          srcset="/hero-960.webp 960w, /hero-1440.webp 1440w, /hero-1920.webp 1920w"
          sizes="100vw">
  <img src="/hero-1920.jpg"
       alt=""
       width="1920" height="1080"
       fetchpriority="high"
       decoding="async"
       class="hero-bg">
</picture>

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

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

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 behandelt de methode, en tekst op een afbeelding 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, zodat gedeelde links bij de pagina passen.