Image « hero » de site web : taille idéale, meilleures pratiques et exemples

Devant un site web, les visiteurs se font une première impression en quelques secondes. Si quelque chose n’attire pas immédiatement leur attention, vous risquez de les perdre définitivement. Le fait qu’un utilisateur se contente d’une seule page web ou poursuit son exploration dépend en partie de la conception de votre site. L’image « hero » de votre site est un aspect essentiel de cette conception.

L’image « hero » d’un site web, parfois appelée image de bannière, est une image d’en-tête destinée à attirer l’attention des visiteurs et à les inciter à rester sur le site. Les images « hero » d’un site web communiquent généralement quelque chose à propos de votre entreprise et/ou de votre marque et orientent les visiteurs vers une action, comme cliquer sur des pages de produits. 

Les éléments de design de votre site web sont essentiels au récit de la marque, et la sélection d’une image ou d’une vidéo pour l’arrière-plan de la page d’accueil est la première étape de l’élaboration de ce récit. 

Qu’est-ce qu’une image « hero » sur un site web ? 

L’image « hero » d’un site web est une photo, une illustration ou une vidéo de grande taille qui apparaît en haut d’une page web, près de la barre de navigation. Ces images apparaissent généralement sur la page d’accueil d’un site web et servent de point focal. Elles ont souvent un appel à l’action ou un titre en superposition.

Parfois, les images « hero » occupent la totalité de la page d’accueil. Mais la taille et le type dépendent de ce que vous souhaitez suggérer par cette image. Vous pouvez également avoir des images « hero » sur les pages Produit, Boutique, À propos ou Contact de votre site. 

En règle générale, vous pouvez utiliser une image « hero » lorsque vous souhaitez attirer l’attention sur un message particulier, donner plus d’importance à une page ou si l’image contribue à l’objectif de la page. Par exemple, une image « hero » met en valeur une page Boutique ou Produit, tandis qu’une image de votre équipe peut raconter l’histoire de votre entreprise sur une page À propos. 

5 types d’images « hero » de sites web

Il existe de nombreuses manières d’utiliser une image « hero », et différents types d’images que vous pouvez explorer et utiliser. Vous trouverez ci-dessous cinq types courants d’images « hero » pour votre site web, qu’elles soient traditionnelles (comme une image de fond en plein écran), ou non traditionnelles (comme des animations ou un carrousel). 

1. Image statique avec superposition de texte

L’image statique est l’un des types de « hero » les plus courants pour attirer les visiteurs. Cette image n’a pas besoin d’occuper la totalité de la page, mais occupe généralement une grande partie de l’espace en haut de page (c’est-à-dire la première partie de la page que quelqu’un voit). 

Le texte superposé inclut généralement un titre qui résume votre activité et/ou un appel à l’action qui dirige les visiteurs vers une page importante. L’objectif est d’attirer l’attention grâce à une image qui correspond à votre marque et indique votre mission.

Le template de site web Crosby est un exemple d’image statique qui occupe la totalité de l’arrière-plan avec une superposition de texte minimaliste. Il est net, conçu avec une économie de moyens et, avec la bonne photo, il peut laisser une forte impression.

2. Image de fond en plein écran

Une image de fond en plein écran comme « hero » de votre site web est un moyen évocateur et efficace d’attirer des visiteurs. Par exemple, de nombreuses entreprises de mode choisissent une image « hero » en plein écran, parce que cela met en valeur les produits de manière esthétique et conceptuelle. Cette stratégie crée également un engagement plus profond entre vous et l’utilisateur. 

Comme pour l’image statique, une image « hero » en plein écran a généralement un titre et un appel à l’action superposés. Pour être efficace et avoir de l’impact, cette image doit être en haute résolution, mais elle ne doit en aucun cas ralentir le temps de chargement de la page web. 

Le template Belisa est un exemple d’image de fond en plein écran avec texte, qui associe une navigation claire à une photo époustouflante. 

3. Vidéo « hero » en arrière-plan

L’utilisation d’une vidéo pour l’image ou la bannière « hero » d’un site web est un moyen non traditionnel de créer une expérience plus immersive avec votre client potentiel. Une vidéo vous permet de présenter plus de produits ou de raconter l’histoire de votre marque de manière captivante.

Cependant, une vidéo de haute qualité demande un effort de production important. Pour éviter de ralentir les performances du site web et préserver ainsi l’expérience utilisateur, la vidéo doit être relativement courte et facile à mettre en boucle. 

Le template Strade de Squarespace propose une vidéo en boucle avec un texte sur le côté, qui n’interfère pas avec le point focal de l’image « hero ». 

4. Carrousel d’images

La majorité des types d’image « hero » pour site web n’utilisent qu’une seule image ou une seule vidéo. Si vous souhaitez présenter plusieurs images de vos produits, de vos promotions ou de vos contenus, vous pouvez utiliser un carrousel comme « hero » pour votre site web. 

La taille des images est généralement similaire à celle d’une image d’en-tête traditionnelle, mais le nombre d’images vous permet d’inclure plus d’informations et de présenter plus de produits. Le carrousel peut être à défilement automatique ou manuel.

Limitez le nombre d’images que vous utilisez entre trois et cinq. Vous pouvez inclure plus d’images si cela vous semble justifié, mais souvenez-vous que le défilement doit être assez bref pour éviter de surcharger l’expérience utilisateur.

Le template Jotter Press est un exemple parfait de cette ergonomie : deux flèches étroites situées en bas du carrousel permettent aux utilisateurs de parcourir les images. 

5. Image « hero » animée

Pour vous démarquer ou vous lancer dans un autre design moins traditionnel, essayez les images « hero » animées pour site web. Ce type de visuel peut laisser votre créativité s’exprimer librement, mettre en valeur la personnalité de votre marque et maintenir l’intérêt des visiteurs pour votre page (ce qui les encourage à explorer le site). 

Les images « hero » animées peuvent par exemple être extrêmement utiles pour les graphistes et les artistes. En plus de votre portfolio, une image « hero » animée peut démontrer vos compétences à des clients potentiels. 

Comme pour les vidéos et les carrousels, pensez toujours à l’expérience utilisateur. Veillez à ce que les animations ne ralentissent pas la page, n’encombrent pas trop l’espace ou ne limitent pas l’accessibilité aux informations importantes de votre site.

Le template Otroquest offre une animation subtile et épurée qui fait apparaître l’image « hero » sur la page lorsqu’elle se charge. Vous pouvez combiner différents styles d’animation ou animer une seule partie de l’en-tête. 

Meilleures pratiques pour les images « hero » d’un site web

L’image « hero » d’un site web invite les visiteurs à poursuivre leur voyage en découvrant vos produits, vos offres ou votre mission. Voici quelques bonnes pratiques que vous pouvez suivre pour maximiser l’impact de cette technique et montrer votre créativité. 

1. Mettre en avant l’histoire de votre marque

L’image « hero » de votre site web donne une première impression aux visiteurs. Profitez de l’occasion pour faire une démonstration visuelle de ce en quoi consiste votre marque. Imaginons que vous vendiez des t-shirts imprimés à la demande. Selon les motifs présents sur les t-shirts, vous pouvez mettre en valeur le récit de votre marque soit en présentant en carrousel les images d’un mannequin qui porte le produit, soit en incorporant les coloris et les éléments de design à l’image « hero ». 

N’oubliez pas que, quel que soit son style, votre image « hero » peut donner aux visiteurs un aperçu concis de l’actualité de votre site web et de votre marque. 

2. Importance du format, de la taille et des dimensions du fichier

L’une des meilleures pratiques fondamentales à tout type de design est d’utiliser le bon format, la bonne taille et les bonnes dimensions de fichier. En ce qui concerne l’expérience utilisateur, toutes les images « hero » ne se valent pas pour un site web. Pour optimiser votre image « hero », choisissez une image de qualité en haute résolution, qui sera belle tant sur les écrans de bureau que sur les appareils mobiles. 

Voici quelques points de départ pour optimiser votre image « hero » : 

• Mobile : 800 pixels de largeur sur 1200 pixels de longueur

• Bureau : 1600 pixels de large sur 500 pixels de long, ou 1920 pixels de large sur 1080 pixels de long

• Valeur de proportion : 16:9

• Taille du fichier : 10 à 20 Mo

• Type de fichier : JPEG ou PNG pour les images, MP4 ou MOV pour les vidéos

Cela étant dit, souvenez-vous que la taille des écrans et les appareils varient fortement. Idéalement, votre plateforme de site web sera réactive, c’est-à-dire qu’elle adaptera votre site aux différentes tailles d’écran. En cas de doute, testez la qualité d’image et le temps de chargement de votre site sur une variété de navigateurs et d’écrans.

3. Prioriser l’accessibilité

Afin de placer l’expérience utilisateur au premier plan, réfléchissez à ce dont vous avez besoin pour rendre votre image « hero » plus accessible. S’il s’agit d’une vidéo avec dialogues, avez-vous besoin de légendes ? Votre image statique nécessite-t-elle un texte de remplacement ? Y a-t-il d’autres éléments que vous pourriez ajouter, comme un bouton de pause pour les vidéos ou les animations ?

De nombreuses plateformes de création de site web peuvent vous aider à optimiser et à prioriser l’accessibilité pour les visiteurs qui ont des besoins particuliers.  

Lire notre guide sur l’accessibilité des sites web

4. Ajouter un appel à l’action clair

Veillez à ce que votre appel à l’action soit clair, concis et facile à trouver. C’est votre image « hero » qui contribue le plus au récit de marque et incite les utilisateurs à explorer votre site web. Si vous souhaitez guider l’utilisateur vers quelque chose de précis, comme découvrir une nouvelle gamme de bougies artisanales ou réserver une session avec vous, utilisez votre appel à l’action pour l’y aider. 

Découvrir des exemples d’appel à l’action et les meilleures pratiques

5. Tester les images « hero » du site

Toutes les images « hero » n’auront pas un impact sur votre public. L’un des aspects ludiques de la promotion de votre entreprise et de la création de votre site web consiste à tester vos images pour déterminer celle qui a le plus d’impact.

Analysez régulièrement les statistiques de votre site web pour vous assurer que votre image « hero » est toujours efficace. Si vous remarquez une augmentation rapide du nombre de visiteurs qui quittent votre site à partir d’une page contenant une image « hero » ou si vous constatez que les visiteurs ne cliquent pas sur votre appel à l’action, c’est peut-être le signe que vous devez en changer. Faites un test avec une nouvelle image pour voir si elle modifie le comportement des visiteurs.