Quelle taille pour une hero section ? Hauteur, taille d’image et quand la réduire

L’essentiel

• Faites remplir au hero la plus grande partie du premier écran, pas tout. Un morceau de la section suivante indique aux visiteurs que la suite existe.
• Concevez pour les écrans que les gens utilisent : 1920 sur 1080 est la résolution la plus courante sur ordinateur, avec 27,8 % des vues selon StatCounter pour octobre 2026.
• Définissez la hauteur en unités de viewport comme svh, pas en pixels fixes. Sur smartphone, laissez le contenu décider de la hauteur.
• L’image du hero est souvent l’élément le plus lent de la page : les images sont le plus grand élément sur 76 % des pages mobiles, selon le Web Almanac 2025. Gardez-la légère et ne la chargez jamais en lazy loading.

Qu’est-ce que la taille d’une hero section ?

La taille d’une hero section, c’est la hauteur et la largeur du premier bloc d’une page : le titre, la ligne en dessous, le bouton et le plus souvent une image. La largeur suit presque toujours l’écran. La hauteur est le vrai choix, car elle fixe ce qui tient encore au-dessus de la ligne de flottaison.

Il n’existe pas de taille standard en pixels. Les écrans varient trop pour un seul chiffre. Ce que vous fixez, c’est une part de l’écran, plus une taille d’image qui reste nette sur les écrans de vos visiteurs.

Si le terme est nouveau pour vous, le guide sur ce qu’est une hero section présente les quatre choses qu’elle doit dire en cinq secondes.

Les écrans sur lesquels votre hero doit tenir

Votre hero s’affiche sur l’écran du visiteur, quel qu’il soit. Voici trois des résolutions les plus courantes sur ordinateur et sur mobile dans les données mondiales de StatCounter pour octobre 2026, en pixels CSS, avec la largeur d’image que chacune demande.

Écran	Part des vues	Largeur de l’image du hero
Ordinateur 1920 × 1080	27,8 % des ordinateurs	1920 px
Ordinateur 1536 × 864	9,1 % des ordinateurs	1536 px
Ordinateur 1366 × 768	7,5 % des ordinateurs	1366 px
Smartphone 414 × 896	12,7 % du mobile	828 px (densité 2×)
Smartphone 360 × 800	8,6 % du mobile	720 px (densité 2×)
Smartphone 390 × 844	5,3 % du mobile	780 px (densité 2×)

La hauteur de l’écran n’est pas celle que reçoit votre hero. Les onglets et la barre d’adresse du navigateur et le système d’exploitation en prennent une partie, donc la zone visible est toujours plus courte. 1536 × 864 correspond à un écran 1920 × 1080 avec une mise à l’échelle de 125 %, courante sur les portables Windows.

Les smartphones annoncent des pixels CSS, mais la plupart affichent deux ou trois pixels physiques pour chacun. C’est pourquoi une image sur smartphone demande environ deux fois sa largeur CSS pour rester nette.

Quelle hauteur pour une hero section ?

Trois hauteurs sont courantes. Chacune convient à un autre type de page.

• Plein écran (100 % du viewport). Le hero remplit le premier écran et rien d’autre n’apparaît. Idéal pour un produit porté par un visuel fort, comme un appareil photo ou une voiture. Inconvénient : la page peut sembler terminée, et les visiteurs risquent de ne pas défiler.
• La plus grande partie de l’écran (70 à 90 %). Le hero domine, et le haut de la section suivante apparaît en bas. Idéal pour la plupart des pages SaaS, de services et de campagne. Inconvénient : il faut le vérifier sur un écran de portable peu haut comme sur un grand moniteur.
• Hauteur du contenu. Le hero fait la hauteur de son titre, de son sous-titre, de son bouton et de son image, avec des marges. Idéal pour les smartphones et les pages portées par le texte. Inconvénient : sur un grand moniteur, il peut paraître maigre si l’image ne pèse pas.

Le risque du plein écran est réel. Nielsen Norman Group l’appelle l’illusion de complétude : une page qui semble terminée à la ligne de flottaison arrête le défilement. Le guide au-dessus et en dessous de la ligne de flottaison montre pourquoi la section suivante doit commencer au-dessus de la ligne.

La hauteur coûte aussi de l’attention. Les utilisateurs passent 57 % de leur temps de lecture au-dessus de la ligne de flottaison, selon Nielsen Norman Group. Un hero qui occupe tout le premier écran avec une seule photo ne laisse dans ces 57 % aucune place pour une preuve ou l’étape suivante.

Définissez la hauteur en unités de viewport, pas en pixels

Une hauteur fixe de 800 pixels, par exemple, déborde d’un écran de portable de 768 pixels et paraît courte sur un grand moniteur. Les unités de viewport, elles, suivent l’écran.

• Utilisez svh sur mobile. Les navigateurs mobiles masquent leurs barres d’outils au défilement, donc la hauteur du viewport change. web.dev explique que la petite unité de viewport svh mesure l’écran barres d’outils affichées. Un hero à 80svh ne se cache jamais derrière la barre d’adresse.
• Évitez 100vh tout court sur smartphone. Cette unité utilise le grand viewport, barres d’outils masquées. Au premier chargement, le bas du hero, souvent le bouton, se retrouve sous la barre d’outils.
• Ajoutez un minimum et un maximum. Un min-height évite que le contenu soit coupé sur les écrans peu hauts. Un max-height empêche le hero de s’étirer sur les très grands moniteurs.

Quelle taille pour l’image du hero ?

L’image du hero est souvent l’élément qui décide de la vitesse ressentie de la page. Dans le Web Almanac 2025, les images sont l’élément Largest Contentful Paint sur 85,3 % des pages sur ordinateur et 76 % des pages mobiles. web.dev considère un LCP de 2,5 secondes ou moins comme bon, et seuls 62 % des sites y arrivent sur smartphone.

• Servez au moins deux tailles. Utilisez srcset pour qu’un smartphone charge une image d’environ 800 pixels de large et un ordinateur une image d’environ 1920 pixels.
• Utilisez un format moderne. Le JPG représente encore 57 % des images LCP et le PNG 26 %, selon le Web Almanac. Les fichiers WebP ou AVIF sont plus légers à qualité égale.
• Ne chargez jamais l’image du hero en lazy loading. Environ 16 à 17 % des pages chargent leur image LCP en lazy loading, ce qui retarde le premier écran. Chargez-la tout de suite.
• Augmentez sa priorité. Ajoutez fetchpriority="high". Dans un test de web.dev sur Google Flights, cela a réduit le LCP de 2,6 à 1,9 seconde.

Quand réduire le hero

Réduisez le hero quand le visiteur sait déjà pourquoi il vient. Une page de campagne liée à une annonce, une page de tarifs ou une fiche produit pour un client qui revient doit montrer vite l’offre et le bouton, pas une grande image.

Réduisez-le aussi sur smartphone. Un écran de 414 pixels de large n’a pas la place pour une grande image à côté du titre : empilez-les et gardez le titre et le bouton dans le premier écran. Une série d’exemples de hero sections montre quelles pages d’accueil y parviennent.

Que choisir, selon le type de page

Si vous avez une page SaaS

Utilisez la plus grande partie de l’écran, environ 80svh sur ordinateur, avec une capture d’écran du produit. Laissez la première rangée de logos ou de fonctionnalités apparaître en bas.

Si vous vendez un service

Utilisez la hauteur du contenu. Les visiteurs veulent savoir ce que vous faites et comment vous joindre : placez le titre, une ligne de preuve et le bouton dans le premier écran, et renoncez à la photo pleine largeur.

Si vous avez une boutique en ligne

Utilisez un hero plus bas sur les pages catégorie et produit, pour que les produits apparaissent au-dessus de la ligne de flottaison. Gardez un grand hero pour la page d’accueil ou un lancement, et vérifiez le poids de l’image sur smartphone.

Questions fréquentes

Quelle est la taille standard d’une hero section ?

Il n’y a pas de standard fixe. Toute la largeur de l’écran et 70 à 90 % de sa hauteur visible conviennent à la plupart des pages. Sur smartphone, laissez le contenu fixer la hauteur.

Quelle taille doit faire une image de hero ?

Environ 1920 pixels de large pour ordinateur, puisque 1920 × 1080 est l’écran le plus courant. Pour smartphone, servez une version d’environ 800 pixels de large, deux fois la largeur CSS de la plupart des appareils.

Une hero section doit-elle être en plein écran ?

Seulement quand un seul visuel porte la page. Un hero plein écran peut ressembler à la fin de la page : la plupart des pages font mieux quand la section suivante apparaît en bas.

Quelle est une bonne hauteur de hero section sur mobile ?

La hauteur dont ont besoin le titre, le sous-titre, le bouton et une petite image, et pas plus que l’écran. Si vous utilisez une unité de viewport, choisissez svh pour que le bouton ne se cache pas sous la barre d’outils du navigateur.

L’image du hero ralentit-elle ma page ?

Souvent, oui. Les images sont le plus grand élément sur 76 % des pages mobiles, donc l’image du hero fixe votre LCP. Servez des fichiers plus légers aux smartphones, utilisez WebP ou AVIF, et ne la chargez pas en lazy loading.