Des images hero Elementor plus rapides en 2 minutes !

Des images hero Elementor plus rapides

Elementor, un éditeur de pages WordPress populaire, simplifie la conception de pages. Malheureusement, il ralentit souvent les sites. Parfois en raison d'erreurs d'utilisateurs et parfois en raison des choix de conception d'Elementor. Un exemple que je vois presque quotidiennement est la façon dont Elementor gère les images hero. Par défaut, Elementor utilise des images d'arrière-plan pour celles-ci, ce qui ralentit le chargement de la page à chaque fois.

Dernière révision par Arjen Karel en mars 2026

L'attrait des images d'arrière-plan Elementor

Elementor ajoute les images hero sous forme d'image d'arrière-plan par défaut. Lors de l'édition de la page avec Elementor, il suffit de cliquer sur le premier conteneur, de naviguer vers le style et d'ajouter votre image. C'est facile, pratique et à l'épreuve des erreurs. Si cela vous suffit, arrêtez de lire ici, mais si vous vous souciez de vos visiteurs, continuez à lire et découvrez comment créer des images hero Elementor de la bonne manière.

Le problème avec les images d'arrière-plan Elementor

Alors, quel est le problème avec les images d'arrière-plan, vous pourriez demander ? Les images d'arrière-plan sont connues pour ce comportement : elles couvrent l'intégralité de l'arrière-plan d'un élément. Cela fait ce qu'il faut. Mais avec un coût en termes de performances :

• Découverte tardive : D'un point de vue technique, les images d'arrière-plan sont loin d'être idéales. Les images d'arrière-plan d'Elementor ne sont pas immédiatement découvertes dans le code HTML. Ces images d'arrière-plan sont liées dans des feuilles de style. Étant donné que les feuilles de style doivent être téléchargées et analysées séparément, cela signifie qu'elles sont découvertes beaucoup plus tard au cours du processus de rendu. Cela retarde votre Largest Contentful Paint (LCP).
• Non optimisées pour la vitesse : Les images d'arrière-plan ne sont pas optimisées pour la vitesse car elles manquent de propriétés plus récentes comme le lazy loading natif, fetchpriority et le décodage async.
• Non responsive : Enfin et surtout, les images d'arrière-plan d'Elementor ne sont pas responsive et chargeront toujours une image complète de la taille d'un bureau, même pour les petits appareils mobiles.

Je n'entrerai pas beaucoup plus dans les détails (si cela vous intéresse, lisez pourquoi les images d'arrière-plan sont mauvaises), mais il suffit de dire qu'une page avec cette configuration échouera probablement aux Core Web Vitals.

Le correctif en 2 minutes pour les images d'arrière-plan lentes

Les images d'arrière-plan lentes n'ont pas à être un problème. Avec un simple ajustement CSS, elles peuvent être transformées en images rapides et responsive. Le secret ? Utiliser object-fit: cover pour mettre l'image à l'échelle et le combiner avec position: relative sur le conteneur et position: absolute sur l'image.

Fait amusant : Je me suis chronométré aujourd'hui en convertissant des images d'arrière-plan Elementor en images responsive ultra-rapides. Cela m'a pris moins de 2 minutes !

Étape 1 : ajouter les styles nécessaires

Pour corriger les images d'arrière-plan lentes, commencez par appliquer quelques styles CSS essentiels. Ces styles feront en sorte que l'image se comporte comme une véritable image de couverture d'arrière-plan et garantiront qu'elle n'entre pas en conflit avec les divs d'aide d'Elementor.

/* Le conteneur parent relatif */
  .relative{
      position: relative;
  }

  /* S'assurer que les divs d'aide d'Elementor ne sont pas relatifs */
  .relative .elementor-container,
  .relative .elementor-column,
  .relative .elementor-widget-wrap {
      position: initial;
  }

  /* La nouvelle image hero améliorée */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Ce que cela fait :

• .relative : Rend le conteneur parent relatif pour positionner les éléments enfants à l'intérieur.
• .relative .elementor-* : Réinitialise les divs d'aide d'Elementor pour éviter les conflits de mise en page.
• .heroimg : S'assure que l'image se redimensionne pour couvrir le conteneur tout en se plaçant derrière lui.

Comment ajouter les styles :

• Accédez à votre Tableau de bord WordPress.
• Allez dans Apparence > Personnaliser.
• Cliquez sur CSS additionnel.
• Collez le code CSS ci-dessus et enregistrez vos modifications.

Cela pose les bases pour convertir ces images d'arrière-plan lentes en images hero responsive et optimisées. Ensuite, appliquez les classes .relative et .heroimg à votre section hero pour terminer la conversion.

Étape 2 : Préparer le conteneur

Maintenant que les styles sont en place, il est temps de préparer le conteneur pour la nouvelle image hero. Cela implique de supprimer l'image d'arrière-plan existante et d'appliquer la classe .relative au conteneur.

Étapes :

• Modifier le conteneur :
• Accédez à votre éditeur Elementor et sélectionnez le conteneur où l'image hero est actuellement appliquée.
• Supprimer l'image d'arrière-plan :
• Naviguez vers l'onglet Style.
• Localisez la section Arrière-plan où l'image est appliquée.
• Cliquez sur l'icône de corbeille pour supprimer l'image d'arrière-plan.
• Appliquer la classe .relative :
• Passez à l'onglet Avancé.
• Sous Classes CSS, tapez relative.

Étape 3 : Ajouter une nouvelle image et appliquer les nouvelles classes

À quoi s'attendre : Lors de la dernière étape, l'image hero peut sembler mal alignée ou étrange avant l'application des classes. C'est normal. La classe .heroimg transformera l'image en une image hero responsive en pleine largeur qui se comporte comme une couverture d'arrière-plan. Une fois terminée, votre image hero optimisée se placera derrière le conteneur, offrant le même impact visuel avec des performances considérablement améliorées.

Étapes :

• Ajouter un élément Image :
• Dans l'éditeur Elementor, cliquez sur l'icône plus dans le coin supérieur gauche pour ajouter un nouvel élément.
• Faites glisser et déposez le widget Image dans le conteneur supérieur (celui avec la classe .relative).
• Télécharger et sélectionner votre image :
• Dans les paramètres de l'image sur le panneau de gauche, cliquez sur l'espace réservé de l'image.
• Téléchargez l'image en plein écran que vous souhaitez utiliser ou sélectionnez-en une existante dans votre galerie multimédia WordPress.
• Appliquer la classe .heroimg :
• Avec l'image toujours sélectionnée, naviguez vers l'onglet Avancé dans le menu Elementor.
• Dans le champ Classes CSS, tapez heroimg.

Le résultat : un LCP 77 % plus rapide

À ce stade, votre image hero est entièrement optimisée. Une fois que vous publiez la page, inspectez l'élément, et vous remarquerez quelque chose de génial : l'image d'arrière-plan lente a été remplacée par une image de premier plan responsive et rapide. Cette image est désormais chargée avec une fetchpriority élevée, ce qui garantit qu'elle se charge plus rapidement, améliorant ainsi à la fois les Core Web Vitals et la user experience.

Dans cet exemple, le LCP est passé de 2,6 secondes à 0,6 seconde. Il s'agit d'une amélioration de 77 % grâce à un correctif de 2 minutes.

Bonus : précharger l'image hero

Les images d'arrière-plan ne peuvent pas vraiment être préchargées automatiquement. Les images de premier plan peuvent être préchargées par des plugins comme WP Core Web Vitals. Le préchargement de ces images responsive les mettra en file d'attente avant tous vos scripts et priorisera les aspects visuels de votre page web.

Pour d'autres façons d'optimiser vos images, consultez le guide complet d'optimisation des images.

Regardez la procédure pas à pas complète sur YouTube

Regardez-moi corriger une image d'arrière-plan Elementor sur YouTube !