Snellere Elementor hero-afbeeldingen in 2 minuten!

Snellere Elementor hero-afbeeldingen

Elementor, een populaire WordPress-paginabouwer, maakt webdesign eenvoudig. Helaas vertraagt het vaak websites. Soms komt dit door gebruikersfouten en soms door de ontwerpkeuzes van Elementor. Een voorbeeld dat ik bijna dagelijks zie, is hoe Elementor omgaat met hero-afbeeldingen. Standaard gebruikt Elementor hiervoor achtergrondafbeeldingen, wat het laden van de pagina elke keer vertraagt.

Laatst beoordeeld door Arjen Karel in maart 2026

De aantrekkingskracht van Elementor achtergrondafbeeldingen

Elementor voegt hero-afbeeldingen standaard toe als achtergrondafbeelding. Tijdens het bewerken van de pagina met Elementor klik je simpelweg op de eerste container, ga je naar stijl (style) en voeg je de afbeelding toe. Het is makkelijk, handig en hufterproof. Als dat goed genoeg voor je is, stop dan hier met lezen. Maar als je om je bezoekers geeft, lees dan verder en leer hoe je Elementor hero-afbeeldingen op de juiste manier maakt.

Het probleem met Elementor achtergrondafbeeldingen

Wat is er nu precies mis met achtergrondafbeeldingen, vraag je je misschien af? Achtergrondafbeeldingen staan bekend om dit gedrag: ze vullen de hele achtergrond van een element. Het doet wat het moet doen. Maar wel ten koste van de performance:

• Late ontdekking (Late discovery): Vanuit technisch perspectief zijn achtergrondafbeeldingen verre van ideaal. Elementor achtergrondafbeeldingen worden niet onmiddellijk ontdekt in de HTML. Deze achtergrondafbeeldingen zijn gekoppeld in stylesheets. Omdat stylesheets afzonderlijk moeten worden gedownload en geparseerd, betekent dit dat ze veel later in het renderingproces worden ontdekt. Dit vertraagt je Largest Contentful Paint (LCP).
• Niet geoptimaliseerd voor snelheid: Achtergrondafbeeldingen zijn niet geoptimaliseerd voor snelheid omdat ze nieuwere eigenschappen zoals native lazy loading, fetchpriority en async decoding missen.
• Niet responsive: Last but not least, Elementor achtergrondafbeeldingen zijn niet responsive en zullen altijd een afbeelding op volledig desktopformaat laden, zelfs voor kleine mobiele apparaten.

Ik zal niet veel verder in detail treden (als je geïnteresseerd bent, lees dan waarom achtergrondafbeeldingen slecht zijn), maar het volstaat om te zeggen dat een pagina met deze opzet waarschijnlijk niet zal slagen voor de Core Web Vitals.

De 2-minuten fix voor trage achtergrondafbeeldingen

Trage achtergrondafbeeldingen hoeven geen probleem te zijn. Met een eenvoudige CSS-aanpassing kunnen ze worden omgezet in snelle, responsive afbeeldingen. Het geheim? Het gebruik van object-fit: cover om de afbeelding te schalen in combinatie met position: relative op de container en position: absolute op de afbeelding.

Leuk weetje: Ik heb vandaag de tijd bijgehouden terwijl ik Elementor achtergrondafbeeldingen omzette naar razendsnelle responsive afbeeldingen. Het kostte me minder dan 2 minuten!

Stap 1: voeg de benodigde stijlen toe

Om trage achtergrondafbeeldingen te repareren, begin je met het toepassen van een paar essentiële CSS-stijlen. Deze stijlen zorgen ervoor dat de afbeelding zich gedraagt als een volwaardige cover achtergrondafbeelding en voorkomen dat er conflicten ontstaan met Elementor helper-divs.

/* De relatieve parent container */
  .relative{
      position: relative;
  }

  /* Zorg ervoor dat Elementor helper-divs niet relatief zijn */
  .relative .elementor-container,
  .relative .elementor-column,
  .relative .elementor-widget-wrap {
      position: initial;
  }

  /* De nieuwe en verbeterde hero-afbeelding */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Wat dit doet:

• .relative: Maakt de parent container relatief om onderliggende (child) elementen erin te positioneren.
• .relative .elementor-*: Reset Elementor helper-divs om lay-outconflicten te voorkomen.
• .heroimg: Zorgt ervoor dat de afbeelding schaalt om de container te bedekken, terwijl deze erachter wordt geplaatst.

Hoe voeg je de stijlen toe:

• Navigeer naar je WordPress Dashboard.
• Ga naar Weergave > Customizer.
• Klik op Extra CSS.
• Plak de bovenstaande CSS-code en sla je wijzigingen op.

Dit legt de basis voor het omzetten van die trage achtergrondafbeeldingen naar responsive, geoptimaliseerde hero-afbeeldingen. Pas vervolgens de .relative en .heroimg classes toe op je hero-sectie om de conversie te voltooien.

Stap 2: Bereid de container voor

Nu de stijlen op hun plek staan, is het tijd om de container voor te bereiden op de nieuwe hero-afbeelding. Dit omvat het verwijderen van de bestaande achtergrondafbeelding en het toepassen van de .relative class op de container.

Stappen:

• Bewerk de container:
• Ga naar je Elementor-editor en selecteer de container waar de hero-afbeelding momenteel is toegepast.
• Verwijder de achtergrondafbeelding:
• Navigeer naar het Stijl (Style) tabblad.
• Zoek de Achtergrond sectie waar de afbeelding is toegepast.
• Klik op het prullenbak-icoon om de achtergrondafbeelding te verwijderen.
• Pas de .relative class toe:
• Schakel over naar het Geavanceerd tabblad.
• Typ onder CSS-klassen relative.

Stap 3: Voeg een nieuwe afbeelding toe en pas de nieuwe classes toe

Met de container klaar, is het tijd om de responsive en geoptimaliseerde hero-afbeelding toe te voegen met behulp van Elementor.

Wat te verwachten: Tijdens de laatste stap kan de hero-afbeelding er verkeerd uitgelijnd of vreemd uitzien voordat je de classes toepast. Dit is normaal. De .heroimg class transformeert de afbeelding in een responsive hero-afbeelding over de volledige breedte die zich gedraagt als een achtergrond-cover. Eenmaal voltooid, zit je geoptimaliseerde hero-afbeelding achter de container en biedt deze dezelfde visuele impact met aanzienlijk verbeterde performance.

Stappen:

• Voeg een afbeelding-element toe:
• Klik in de Elementor-editor op het plus-icoon in de linkerbovenhoek om een nieuw element toe te voegen.
• Sleep de Afbeelding-widget in de bovenste container (degene met de .relative class).
• Upload en selecteer je afbeelding:
• Klik in de afbeeldingsinstellingen in het linkerpaneel op de afbeeldingsplaceholder.
• Upload de schermvullende afbeelding die je wilt gebruiken of selecteer een bestaande uit je WordPress-mediagalerij.
• Pas de .heroimg class toe:
• Terwijl de afbeelding nog is geselecteerd, navigeer je naar het Geavanceerd tabblad in het Elementor-menu.
• Typ in het veld CSS-klassen heroimg.

Het resultaat: 77% snellere LCP

Op dit punt is je hero-afbeelding volledig geoptimaliseerd. Zodra je de pagina publiceert en het element inspecteert, zul je iets geweldigs opmerken: de trage achtergrondafbeelding is vervangen door een responsive, snelle voorgrondafbeelding. Deze afbeelding wordt nu geladen met een hoge fetchpriority, wat ervoor zorgt dat deze sneller laadt, waardoor zowel de Core Web Vitals als de user experience verbeteren.

In dit voorbeeld daalde de LCP van 2,6 seconden naar 0,6 seconden. Dat is een verbetering van 77% door een fix van 2 minuten.

Bonus: preload de hero-afbeelding

Achtergrondafbeeldingen kunnen niet echt automatisch gepreload worden. Voorgrondafbeeldingen kunnen worden gepreload door plugins zoals WP Core Web Vitals. Het preloaden van deze responsive afbeeldingen plaatst ze in de wachtrij vóór al je scripts en geeft prioriteit aan visuele aspecten van je webpagina.

Voor meer manieren om je afbeeldingen te optimaliseren, bekijk je de volledige gids voor afbeeldingsoptimalisatie.

Bekijk de volledige walkthrough op YouTube

Kijk hoe ik een Elementor achtergrondafbeelding fix op YouTube!