Vous avez déjà cliqué sur un site, vu une énorme image en haut, un titre énorme, deux boutons, et vous êtes parti au bout de quatre secondes parce que vous ne compreniez pas ce qu'on vous vendait ? Moi aussi. Et c'est exactement le problème de la section hero : tout le monde en a une, presque personne ne sait pourquoi elle est là.
Je fais des landing pages pour des petites boîtes depuis un moment, et je vais vous dire un truc qui fâche : dans la majorité des audits que je rends, la section hero est la partie la plus négligée de la page. Pas la plus moche. La plus négligée. On passe des heures sur les témoignages clients, sur le footer, sur les mentions légales, et on expédie le premier écran comme si c'était une formalité.
Points clés à retenir
- La section hero, c'est tout ce que le visiteur voit avant de scroller — sur mobile comme sur desktop.
- Elle doit convaincre au premier coup d'œil : titre, sous-titre, bouton, et pas grand-chose d'autre.
- Une image hero mal compressée peut à elle seule plomber le temps de chargement du premier écran.
- Le bon type de hero dépend de votre objectif : collecte de leads, vente directe ou simple crédibilité.
- Ce qui se trouve sous la ligne de flottaison ne sauve jamais un premier écran raté.
Une section hero, c'est quoi exactement (et pourquoi ça se joue au premier écran)
Le hero, ou hero header, c'est la première section que voit un visiteur en arrivant sur une page web. C'est aussi simple que ça. Elle doit être très soignée et convaincre immédiatement.
L'expression "au-dessus de la ligne de flottaison" revient souvent et elle mérite qu'on s'y arrête, parce qu'elle est mal comprise. La ligne de flottaison, c'est la frontière invisible entre ce qui est visible à l'écran et ce qui ne l'est pas encore. La section hero, c'est donc tout ce qui se situe avant de scroller. Et sur mobile, cette zone est ridiculement petite : sur un iPhone standard, vous avez parfois 600 pixels de hauteur utile une fois la barre du navigateur prise en compte.
600 pixels. Voilà votre scène.
Pourquoi on appelle ça "hero" et pas "bannière" ?
Le terme vient du jargon du web design, par analogie avec le "hero shot" en photographie ou au cinéma : le plan large qui présente le personnage principal. Sauf qu'ici, le personnage principal, c'est votre produit ou votre promesse. Le mot s'est imposé dans les années 2010 avec la généralisation des sites à grande image plein écran. Aujourd'hui, dire "hero banner" ou "hero header" revient au même.
Ce qu'on met vraiment dedans
Les éléments classiques d'une section hero sont peu nombreux, et c'est volontaire :
- Un titre ou une accroche — la promesse, en une phrase
- Un sous-titre qui précise le public ou le bénéfice
- Un bouton d'action, idéalement un seul
- Éventuellement un visuel : image hero, illustration, ou rien du tout
- Et parfois une preuve sociale discrète (logo client, note moyenne)
Quand je vois une hero avec trois boutons de couleurs différentes, quatre badges et un carrousel, je sais déjà que la page va mal convertir. Ce n'est pas une intuition. Sur une page de collecte de leads que j'ai retravaillée l'an dernier, on est passés de trois appels à l'action concurrents à un seul, plus lisible : le taux de clic sur le bouton principal est passé de 2,3 % à 4,1 % en quatre mois. Même trafic, même offre. Juste moins de bruit en haut de page.
L'image hero : le poste que tout le monde néglige
Si je devais choisir un seul élément sur lequel les gens se plantent, ce serait celui-là.
Une image hero mal préparée, c'est un fichier de 2,5 Mo en JPEG qui s'affiche en plein écran. Le visiteur attend. Le navigateur attend. Et pendant ce temps, il fixe un rectangle blanc. Sur les connexions mobiles moyennes, cette attente se compte en secondes, pas en millisecondes. Résultat : il part avant même d'avoir vu votre belle accroche.
Dimensions et poids : ce que je vise en pratique
Voici les valeurs que j'applique systématiquement, et qui n'apparaissent presque jamais dans les articles d'inspiration visuelle :
| Élément | Cible desktop | Cible mobile | Pourquoi |
|---|---|---|---|
| Largeur image hero | 1920 px max | 800 px max | Au-delà, on charge des pixels que personne ne verra |
| Poids du fichier | < 250 Ko | < 120 Ko | C'est le premier élément à charger, il faut qu'il soit léger |
| Format | WebP ou AVIF | WebP ou AVIF | Le JPEG est un dernier recours, pas un défaut |
| Texte dans l'image | À éviter | À éviter | Illisible sur petit écran, invisible pour les moteurs |
| Hauteur utile mobile | — | 500-650 px | Au-delà, le bouton passe sous la ligne de flottaison |
Un détail que j'ai mis du temps à comprendre : l'image hero est souvent l'élément le plus lourd du premier écran, et donc celui qui pèse le plus sur la vitesse de rendu perçue. Ce n'est pas la police. Ce n'est pas le script d'analytics. C'est l'image. J'ai récupéré près d'une seconde de chargement sur un site e-commerce en repassant simplement la hero en WebP et en la dimensionnant correctement. Une seconde. Sur mobile, c'est énorme.
Faut-il absolument une image ?
Non. Et c'est peut-être le conseil le plus utile de cet article.
Si votre produit est abstrait (un logiciel, un service, un conseil), une photo de bureau avec des gens qui sourient n'apporte rien. Elle remplit l'espace et ralentit la page. Un hero typographique — grand titre, fond sobre, une couleur d'accent — sera plus rapide, plus lisible, et souvent plus élégant. J'ai basculé trois sites de la photo d'entreprise générique vers un hero purement typographique. Aucun n'a perdu en conversion. Deux ont gagné.
Hero image ou hero typographique : comment choisir sans se tromper
La vraie question n'est pas "quel style est à la mode". Elle est : qu'est-ce que je veux que le visiteur fasse dans les cinq prochaines secondes ?
Voici comment je tranche, selon le contexte :
- E-commerce, produit physique visuel : hero image, sans hésiter. Le visiteur doit voir l'objet. Une photo nette, un seul produit, fond neutre.
- SaaS ou service B2B : hero typographique avec une capture d'interface en dessous. La promesse en gros, la preuve en petit.
- Collecte de leads (formulaire, rendez-vous) : hero minimal, un titre clair, un champ ou un bouton. Zéro décoration inutile, chaque élément parasite coûte des inscriptions.
- Site vitrine, cabinet, artisan : hero avec une photo réelle de vous ou de votre lieu. C'est votre seul avantage face aux grandes structures.
- Application grand public : hero avec un aperçu de l'app sur un écran de téléphone, avec un titre qui explique le bénéfice, pas la fonctionnalité.
Vous remarquerez qu'aucune de ces lignes ne dit "mettez un carrousel". Si vous hésitez encore sur ce point en 2026, la réponse est non.
Le hero banner, c'est la même chose ?
Presque. On parle de hero banner quand la section prend la forme d'un bandeau large, souvent plein écran, qui occupe toute la largeur de la page. Le terme "banner" met l'accent sur l'aspect visuel et horizontal. Dans la pratique, hero, hero section, hero header et hero banner désignent la même zone. La nuance est marketing, pas technique.
Les erreurs que je vois le plus souvent (et que j'ai commises aussi)
Je vais être honnête : j'ai fait la plupart de ces erreurs avant de comprendre.
- Mettre le contenu clé sous la ligne de flottaison. Le titre est visible, mais le bouton est juste en dessous. Sur desktop ça passe. Sur mobile, non.
- Trop de texte. Un hero n'est pas un paragraphe. Si vous avez besoin de six lignes pour expliquer votre promesse, le problème est ailleurs.
- Un titre qui décrit ce que vous faites au lieu de ce que le client obtient. "Solutions innovantes depuis 1998" ne dit rien à personne.
- Charger une vidéo en autoplay plein écran. Magnifique sur un écran de démo, désastreux sur un forfait mobile.
- Oublier le contraste entre le texte et l'image de fond. Un titre blanc sur une photo claire est illisible, et personne ne s'en aperçoit sur son grand écran calibré.
Ce dernier point m'a coûté cher. J'avais livré une page avec un titre beige sur une photo de plage ensoleillée. Superbe dans mon navigateur. Illisible sur le téléphone d'un client, en extérieur. Il m'a envoyé une capture. Depuis, je teste systématiquement mes heros sur un vrai téléphone, dehors, en plein jour. Ce n'est pas une blague. C'est la seule façon de voir ce que voit votre visiteur.
Questions qu'on me pose souvent sur la section hero
C'est quoi un bloc hero ?
Un bloc hero, c'est simplement la section hero considérée comme un bloc de contenu dans le code ou dans l'éditeur de votre site. Le terme "bloc" vient des constructeurs de pages (Elementor, Webflow, et compagnie), où chaque zone se manipule comme un module. Le fond, c'est la même chose que la section hero : la première zone visible en haut de la page, avant le scroll.
C'est quoi "hero" tout court ?
"Hero" désigne à la fois le concept et la zone. Quand un designer dit "refais-moi le hero", il parle de la première section. Quand on dit d'un site qu'il a "un bon hero", on veut dire que son premier écran est clair, lisible et convaincant. Le mot n'a rien de magique : c'est du vocabulaire de métier, importé de la photo et du cinéma.
Quelle taille doit faire mon image hero ?
Visez 1920 px de large maximum en desktop, 800 px en mobile, et un poids sous les 250 Ko. En dessous de 120 Ko sur mobile, c'est encore mieux. Tout ce qui dépasse est du gaspillage de bande passante.
Une section hero est-elle obligatoire ?
Techniquement, non. Vous pouvez commencer votre page par une grille de produits ou un article. Mais dans ce cas, c'est ce contenu qui devient votre hero, avec les mêmes enjeux. La question n'est pas "faut-il une section hero", elle est "qu'est-ce qui accueille le visiteur en premier". Vous n'y échappez pas.
Le premier écran n'est pas une décoration
La section hero, c'est une histoire de quelques secondes. Pas de pixels, pas de tendances, pas de "ça fait pro". Juste : est-ce que la personne comprend ce que vous proposez et ce qu'elle doit faire ensuite ?
Ce qui m'étonne encore, c'est que la plupart des refontes que je fais ne touchent pas au design général. Elles touchent au premier écran. On enlève une image lourde, on réécrit un titre, on remonte un bouton de 200 pixels. Le reste de la page ne bouge pas. Et pourtant les chiffres changent.
La prochaine fois que vous ouvrirez votre propre site, faites-le sur votre téléphone. Pas sur votre ordinateur. Regardez ce qui s'affiche avant que vous ayez envie de scroller. Si vous ne savez pas quoi faire à cet instant précis, votre visiteur non plus.
