La première fois que j'ai entendu quelqu'un dire « la section hero », j'ai cru qu'on parlait de jeux vidéo. Genre un boss final, un truc héroïque. En fait non. On parlait du gros bloc en haut de la page d'accueil d'un site. Et depuis, j'ai passé des années à en dessiner, à en casser, à les refaire trois fois parce que la version mobile était illisible. Voilà ce que j'ai appris à la dure.
Si tu cherches une définition rapide : la section hero (ou hero header, hero banner, hero image) est le grand bandeau visuel situé tout en haut d'une page web, juste sous la navigation. C'est la première chose que l'œil attrape. Et c'est aussi, statistiquement, la zone la plus souvent bâclée par les équipes techniques alors qu'elle décide de beaucoup.
Dans cet article, je ne vais pas te faire une galerie de jolies captures Dribbble. On va parler specs d'images, LCP, accessibilité et tests A/B. Parce que c'est là que ça se joue vraiment, et c'est exactement ce que tous les articles « 10 exemples inspirants » oublient de te dire.
Points clés à retenir
- La section hero est le bandeau visuel haut de page : elle porte ton message principal et ta promesse en quelques secondes.
- Son image pèse souvent le LCP du site. Mal optimisée, elle plombe tes Core Web Vitals.
- Le contraste texte/fond et le texte alternatif font partie du travail, pas d'une option.
- Desktop et mobile ne se traitent pas pareil : le recadrage change le sens d'une photo.
- Un bon hero se teste. Un hero « qui a l'air bien » sans données, c'est de la décoration.
C'est quoi une section hero, au juste (et pourquoi tout le monde s'y trompe)
Une section hero, c'est un bloc. Un seul. En haut de page. Il contient généralement un titre fort, parfois un sous-titre, un appel à l'action, et un fond visuel (image, vidéo, dégradé, illustration). Quand un designer dit « hero », il parle de ce bloc-là.
Le mot vient de la mise en page de presse : à la une d'un journal, l'article « hero » est celui qui occupe le plus de place, celui qu'on voit d'abord. Le web a repris le terme sans le repenser. Résultat : beaucoup de gens confondent la section hero avec « la bannière » ou « le carrousel ». Ce n'est pas la même chose.
Section hero, bannière, carrousel : la confusion fréquente
Une bannière est une zone horizontale, plate, souvent publicitaire ou promotionnelle. Un carrousel est un diaporama qui fait défiler plusieurs visuels au même endroit. La section hero peut prendre la forme d'un carrousel… mais c'est rarement une bonne idée, et j'y reviens plus bas.
- Hero : bloc unique en haut de page, non répétitif, qui porte le message principal.
- Bannière : bande étroite, souvent promotionnelle, plus discrète.
- Carrousel : plusieurs slides qu'on fait défiler.
- Hero image : désigne souvent l'image de fond dudit hero.
Le rôle réel : retenir ou faire fuir en quelques secondes
Le hero est le seul endroit du site où tu as l'attention complète du visiteur. Après, il scrolle, il hésite, il compare. Avant, il n'a encore rien vu. Donc soit ta promesse est claire, soit il se barre.
Je l'ai appris sur un projet client : on avait un hero magnifique, plein écran, photo d'architecte souriant, typographie élégante. Beau. Le problème ? Personne ne comprenait ce que vendait l'entreprise sans scroller. Trois semaines de tests plus tard, en remplaçant la photo par une phrase claire, le taux de rebond a baissé de 18%. On a pleuré sur la jolie photo, mais on a gardé le chiffre.
Ce que personne ne dit : la section hero et tes performances
C'est ici que 90% des articles sur le sujet s'arrêtent et que le mien commence. Parce que le hero n'est pas qu'un problème de design. C'est un problème d'ingénierie.
L'image hero est souvent ton LCP
Le LCP (Largest Contentful Paint) mesure le temps d'affichage du plus gros élément visible. Sur un site avec une grosse image hero, cette image EST le LCP. Donc si elle pèse 1,8 Mo en PNG mal compressé, tu viens de flinguer ta métrique Core Web Vitals.
J'ai vu des sites passer de 4,2 secondes à 1,9 seconde de LCP simplement en changeant le format de l'image hero. Pas de refonte, pas de nouvelle infra. Juste AVIF au lieu de PNG, la bonne taille et un chargement prioritaire.
Ordre de grandeur : une image hero qui s'affiche sur la majorité des écrans tourne souvent autour de 1600 à 1920 px de large, avec une version mobile réduite. Le poids, lui, devrait rester sous les 200-300 Ko si tu veux un LCP correct. Au-delà, tu payes.
Les specs techniques que j'utilise
Voici ce que j'applique par défaut sur mes projets. Ce ne sont pas des lois, mais ça marche.
| Élément | Desktop | Mobile |
|---|---|---|
| Largeur image | 1920 px (max 2560) | 768 px (max 1080) |
| Ratio courant | 16:9 ou 21:9 | 4:5 ou 1:1 |
| Format | AVIF, fallback WebP | AVIF, fallback WebP |
| Poids cible | < 250 Ko | < 120 Ko |
| Attribut de chargement | fetchpriority="high" | fetchpriority="high" |
Le fetchpriority="high" sur l'image hero, c'est un des gains les plus simples à mettre en place et un des plus sous-utilisés. Trois lignes de HTML, un LCP plus propre.
Accessibilité : le point que tout le monde saute
Contraste du texte sur l'image. Tu l'as vu, ce hero avec un texte blanc cassé posé sur une photo claire ? Illisible. Et pourtant on en croise à chaque audit.
La règle simple : si tu poses du texte sur une image, prévois un overlay sombre (ou clair) suffisant pour atteindre un contraste de 4,5:1 minimum pour le texte courant. C'est le seuil WCAG AA. En dessous, tu exclues des gens.
Le texte alternatif, pas une case à cocher
Une image hero purement décorative mérite un alt vide : alt="". Une image hero qui porte du sens (un produit, une personne, un lieu) mérite un alt descriptif. La différence est sémantique : décris ce que l'image apporte, pas ce qu'elle montre à la lettre.
Et si ton hero est une vidéo de fond qui démarre en autoplay : assure-toi qu'elle respecte prefers-reduced-motion. Une animation qui tourne en boucle peut provoquer un vrai malaise chez certaines personnes. Ce n'est pas un détail, c'est un critère d'accessibilité reconnu.
- Contraste texte/fond ≥ 4,5:1.
alt=""si décoratif,altdescriptif sinon.- Vidéo de fond : respecter
prefers-reduced-motion. - Le CTA du hero doit être atteignable au clavier, sans piège au focus.
Desktop vs mobile : deux heros, pas un
Le recadrage change tout. Une photo de paysage magnifique en 21:9 devient un bout de ciel flou en mobile portrait. J'ai fait cette erreur sur un site de randonnée : sur desktop, la photo montrait un sentier qui serpentait. Sur mobile, elle montrait 80% de nuage. Personne ne comprenait où on était.
La solution : utiliser <picture> et servir une image recadrée différemment pour le mobile. Ce n'est pas de la magie, c'est deux fichiers et une balise. Et si tu ne peux pas changer le cadrage, positionne l'image intelligemment avec object-position pour garder le sujet dans le cadre visible.
Le carrousel en hero, bonne ou mauvaise idée ?
Contre. Sauf cas très précis. Un carrousel cache 80% de ton message derrière un clic que personne ne fera. Les données que j'ai vues sur trois projets différents pointent toutes dans le même sens : les slides 2 et 3 ont un taux d'engagement ridicule, souvent sous les 5%. Tu dépenses de l'énergie pour des utilisateurs que tu n'as pas.
Comment tester un hero sans se raconter d'histoires
Un hero, ça se teste. Pas à l'œil. Voici ce que j'ai appris en accumulant les A/B tests.
Les variables qui bougent vraiment les chiffres
- Le titre : promesse concrète vs slogan abstrait. Écart observé : jusqu'à 25% de clics sur le CTA.
- La position du bouton : centré, à gauche, sous le titre. Résultats très dépendants du secteur.
- Le fond : photo vs aplat de couleur + illustration. Sur du B2B, l'aplat gagne souvent.
- La longueur du texte visible avant scroll.
Un mot d'avertissement : un A/B test sur un hero demande du trafic. En dessous de quelques milliers de sessions par variante, tu mesures du bruit. J'ai vu des équipes déclarer une victoire sur un écart de 0,3% après 600 visites. Ce n'est pas une victoire, c'est un hasard.
Et un truc que je répète à chaque designer junior : ne teste qu'une variable à la fois. Changer le titre, la photo et la couleur du bouton dans la même variante, c'est mesurer l'ensemble et ne rien apprendre.
Les erreurs que je vois en boucle
Trois trucs reviennent systématiquement dans mes audits.
D'abord, la surcharge. Titre + sous-titre + deux phrases + trois boutons + un champ de newsletter. Le hero devient un couloir. Une promesse claire, un bouton, point.
Ensuite, l'image lourde non optimisée. On la choisit pour ses pixels, jamais pour ses kilos. C'est le même débat qu'une valise : ce qui compte, c'est ce qu'elle pèse une fois fermée.
Enfin, le CTA qui ne dit rien. « En savoir plus ». Sur quoi ? Pour qui ? Un bouton hero doit être une action, pas un concept.
Bon, franchement, si tu ne retiens qu'une chose de cet article : ton hero n'est pas une image, c'est un argument. Il dit en une seconde ce que tu fais, pour qui, et ce que la personne doit faire ensuite. Tant que ce n'est pas clair, aucune photo magnifique ne te sauvera. Et quand c'est clair, même un fond bleu uni peut suffire.
