Comment créer une image principale percutante pour votre site web

La première chose que quelqu'un voit lorsqu'il visite votre site web, c'est une hero image.

Les gens sont influencés par la façon dont les images leur font ressentir des choses. En fait, vous avez probablement remarqué que vos sites web et vos marques préférés utilisent des images pour captiver et motiver leurs utilisateurs. Après tout, une image vaut mille mots… n'est-ce pas ? Ainsi, la bonne hero image pourrait valoir des millions de dollars !

C'est particulièrement vrai pour les entreprises modernes, qui utilisent de telles images pour convertir des prospects en clients. Mais comment cela se fait-il ?

Une image, qu'il s'agisse d'une image unique ou d'une série de hero images, vous aide à transmettre votre message et le concept global de votre marque. Mais pourquoi est-il important de transmettre votre message via une image ? Eh bien, cela influence simplement la façon dont les gens perçoivent votre marque. Cela peut les amener à se sentir excités, confiants, en colère, heureux, etc.

C'est pourquoi nous allons parler des hero images. Nous examinerons quelques faits sur les hero images qu'il est bon de connaître, quelques notions liées à la conversion par l'image, et verrons même quelques exemples. Plongeons dans la manière dont vous pouvez persuader les utilisateurs avec une seule image.

Avant d'entrer dans le vif du sujet, revenons aux bases et expliquons ce qu'est vraiment une hero image.

En bref, une hero image est la grande photographie ou illustration que certains sites utilisent en haut de leur site web. Plus formellement, c'est une grande image promotionnelle située au-dessus du pli (la moitié supérieure du site) utilisée pour attirer l'attention.

La bonne nouvelle, c'est qu'elle est assez facile à intégrer dans la conception de votre site web. Vous pouvez ajouter une petite quantité de HTML ou de CSS à votre page pour obtenir une image responsive. Vous pouvez aussi essayer le hero image de Bootstrap, en créant une grande boîte, un en-tête de page, ou un « jumbotron » qui affiche du contenu spécial.

Souvent, ces hero images contiendront du texte, des appels à l'action (CTA), ou seront composées d'une série d'images. Mais ces éléments posent souvent des problèmes pour les designs web responsive. Heureusement, il existe des solutions : créer une hero image responsive est donc possible pour des entreprises de toutes tailles.

Une image responsive est une image qui peut être affichée de façon appropriée sur une variété d'écrans et de plateformes. Cela peut consister à remplacer l'image par une version de taille différente selon l'appareil, ou à modifier le texte et les superpositions afin qu'ils s'affichent correctement dans chaque cas d'utilisation.

Ainsi, une hero image responsive est simplement l'image principale du site, optimisée pour s'adapter à diverses conditions d'affichage.

Maintenant que vous comprenez ce qu'est une hero image, parlons de quelques bonnes pratiques et exigences. Bien que cela semble relativement simple, une hero image doit être conçue afin de vous avantager plutôt que de contrarier ou d'embrouiller les clients potentiels.

Considérez-la comme une landing page… Elle a pour mission de faire le travail : transmettre votre message et attirer de nouveaux prospects. Cela peut aussi renforcer la notoriété de la marque, et c'est potentiellement ce dont les gens parleront lorsqu'ils évoqueront votre marque.

Voici donc quelques conseils à prendre en compte lors de la mise en place de votre hero image :

Les gens réagissent et se souviennent beaucoup mieux des choses quand il y a de l'émotion. Ça ne veut pas dire qu'il faut en faire trop. Mais si vous pouvez y insérer subtilement quelque chose qui fait du bien aux gens ou qui les touche profondément, votre image principale aura un impact.

Votre image principale peut renforcer l'émotion ou le ressenti que vous cherchez à transmettre.

Pampers, une marque de couches populaire, fait appel au célèbre chanteur John Legend et y capture un vrai instant de parentalité (la tête qu'on fait quand on change une couche souillée). Cela renforce la confiance envers la marque. Savoir qu'une célébrité choisit Pampers et change des couches renforce l'attrait de la marque.

De plus, on ressent vraiment l'instant capté, ce qui permet à la plupart des parents de s'identifier.

Vous savez ce qui est déroutant ? Arriver sur un site et tomber sur une image qui n'a rien à voir avec ce qu'on y vend. Ça vous pousse à vous demander si vous avez tapé la bonne adresse web, non ?

Votre image principale doit être en rapport avec ce que vous faites. Si vous vendez des friandises pour chiens haut de gamme, par exemple, vous n'êtes pas obligé de montrer vos produits ; vous pouvez choisir de montrer quelque chose en lien avec les chiens. Cela peut être un chien qui saute sur la plage, en train de dévorer un grand bol de nourriture, ou même simplement un chien assis. Votre image doit se rapporter à votre activité, point final.

Barkbox met en valeur son client idéal ainsi que son produit. Elle rend le tout assez intrigant en utilisant des couleurs vives.

Êtes-vous déjà tombé sur un site qui utilise des images pixellisées ? Qu'avez-vous ressenti ? La plupart des gens perdent confiance dans la qualité d'un produit ou d'un service qu'ils pourraient obtenir lorsque, en tant que clients potentiels, la première chose qu'ils voient est un site de mauvaise qualité avec une grande image principale affichée.

Si vous utilisez des photos de haute qualité, avec des résolutions adaptées aux appareils, vous pouvez donner une bonne première impression.

Imaginez que vous tombiez sur un site qui vend des articles de plage. S'ils essayaient d'étirer une image pour l'adapter, le rendu serait flou et pixelisé. S'ils utilisaient une image de taille appropriée, comme celle à droite, ce serait bien mieux.

Si vous envisagez d'utiliser un appel à l'action, il doit se démarquer. En même temps, il ne doit pas voler la vedette. Trouvez donc un équilibre entre les deux qui fonctionne.

Quelques éléments à prendre en compte : la couleur et l'emplacement. Vous ne voulez pas que la couleur soit noyée par l'image environnante. Vous ne voulez pas non plus placer le bouton d'appel à l'action près d'autres boutons (comme des éléments de menu ou des menus déroulants).

Vous pouvez effectuer un test rapide en floutant l'image pour voir si le bouton est suffisamment visible. Si votre œil repère l'emplacement du bouton, c'est que vous avez bien réussi !

Prenez la page de parrainage de Sock Fancy et son image hero. L'image présente des couleurs vives. Ils ont placé leur CTA suffisamment éloigné de la barre de menu et ont utilisé un joli bouton noir pour le faire ressortir du reste de l'image.

Quand on fait le test du flou, l'image ressort et votre regard y est attiré. On remarque surtout l'image et le bouton, sans que celui-ci paraisse trop envahissant.

Vous pouvez essentiellement utiliser tout ce que vous voulez pour votre image principale. Mais si vous utilisez des personnes, un client peut se projeter visuellement dans la même pose.

Lorsque vous utilisez une personne, un utilisateur peut ressentir une connexion et donc se sentir davantage lié à votre marque. Évitez d'être trop générique. Une photo trop mise en scène n'a pas le même impact. Préférez plutôt des photographies de personnes ou de clients qui correspondent réellement à votre public cible. 

Des sites tels que Pikwizard offrent une superbe sélection d'images de stock, évitant les mises en scène clichées et proposant plutôt des visuels auxquels on peut s'identifier.

Acer a choisi de montrer une diversité d'utilisateurs dans différentes situations, ce qui illustre qu'il s'agit d'un produit destiné à tous.

Mais si des séances photo comme celle-ci ne rentrent pas dans votre budget, optez plutôt pour des images d'archives neutres représentant des personnes ordinaires auxquelles les utilisateurs peuvent s'identifier.

Attendre n'est pas agréable, et les gens ont une capacité d'attention très courte : la vitesse de chargement est donc essentielle pour maintenir l'engagement des utilisateurs. Des études récentes montrent que vous disposez de 7 secondes pour capter l'attention de quelqu'un. Nous sommes tous déjà passés par là, à attendre qu'une page se charge, puis à passer à autre chose avant même d'avoir eu le temps de cligner des yeux.

Faites quelques tests pour vous assurer que votre page se charge rapidement. La dernière chose que vous souhaitez, c'est que quelqu'un quitte votre site parce que les images ne se chargent pas.

Pensez à votre stratégie SEO : la taille des images et la vitesse de chargement en font partie !

Pour qu'une image principale soit responsive, il faut veiller à prendre en compte toutes les tailles d'écran susceptibles de l'afficher.

L'optimisation pour tous les appareils est essentielle et permettra de conserver la cohérence de votre image pour l'ensemble des utilisateurs. Il existe de nombreux outils que vous pouvez utiliser, comme un responsive image breakpoint generator. Celui-ci analysera votre image pour une variété de tailles d'écran afin que vous puissiez choisir la taille la plus adaptée.

Vous pouvez aussi utiliser un logiciel de graphisme qui vous aide à concevoir du contenu pour plusieurs appareils. Vous pourriez être amené à recadrer l'image ou à utiliser une version différente de l'image principale pour l'adapter aux appareils plus petits, comme les smartphones.

Jetez un coup d'œil à Gold's Gym. Ils ont une grande image principale qui montre quatre personnes différentes ainsi que leur promesse de marque. Mais cela ne tiendrait pas sur un appareil plus petit : le texte ne serait pas lisible.

Ils ont donc créé une version mobile pour résoudre ce problème. Comme vous pouvez le voir, le message reste clair : ils l'ont associé à une version recadrée de leur image existante. Vous verrez le même homme, la même promesse, une image légèrement différente. Mais elle transmet quand même le même message.

Parfois, changer votre image principale pour l'adapter à la saison ou à une fête particulière peut susciter de l'intérêt et de l'enthousiasme chez les utilisateurs. Cela peut aussi donner des idées et les encourager à acheter un article que vous pourriez mettre en avant dans ce contexte.

Build A Bear modifie assez souvent son image principale. À chaque fois, la marque met en avant la peluche idéale pour l'occasion ou la fête.

Dans ce cas, la marque utilise un ours en peluche vêtu d'un smoking façon t‑shirt et accompagné de quelques fleurs pour symboliser la fête à venir – la Saint‑Valentin. Elle joue aussi sur le texte pour vous indiquer qu'il est encore tout à fait temps de vous procurer un ours comme celui-ci pour votre propre Valentine.

Utiliser un thème ou organiser une fête est aussi un excellent moyen de stimuler le bouche-à-oreille !

Ceci est optionnel, mais il existe une certaine façon de le faire. Les images elles-mêmes ne devraient pas comporter de texte. Utilisez plutôt du HTML et du CSS pour superposer le texte sur les images.

Beaucoup de sites se contentent de remplacer l'image et laissent le code textuel tel quel. Le problème avec cela, c'est que vous devrez constamment utiliser des images qui s'alignent bien avec l'emplacement du texte. Mais si vous ne changez pas souvent vos images principales, cela peut très bien fonctionner pour vous.

En positionnant votre texte de cette manière, vous rendez l'image plus adaptable, ce qui est idéal, surtout lorsque les utilisateurs accèdent à votre site par différents canaux.

L'image principale actuelle de Sephora présente une variété de produits récemment arrivés. Si vous y prêtez attention, vous remarquerez qu'on y utilise aussi différents textes. Pour y parvenir, comme vous l'avez deviné, le texte a été superposé !

Existe-t-il une taille générale de hero image avec laquelle vous devriez travailler ? Oui — si vous voulez un site optimisé.

Vous voulez que l'image soit suffisamment grande pour toutes les tailles d'écran, mais assez légère pour ne pas ralentir le chargement de votre page. Par conséquent, il faut utiliser des dimensions adaptées et trouver le juste équilibre entre résolution et poids du fichier.

Il existe quelques repères que vous pouvez utiliser comme guide général (nous en avons déjà mentionné certains) : la taille du fichier, la résolution et, bien sûr, les dimensions de l'image.

De nombreux ordinateurs ont une résolution minimale de 1024 x 768 pixels. Vous voudrez que votre hero image soit légèrement plus grande que cela, autour de 1600 x 500 pixels. Vous pouvez toutefois la réduire si vous ciblez des écrans plus petits (comme un téléphone ou une tablette).

La taille de l'image hero pour WordPress varie selon les appareils, comme pour n'importe quel site. Il faut utiliser un fichier plus petit pour les appareils mobiles, alors qu'une image de grande taille (jusqu'à 2880 px) sera appropriée pour les grands écrans. Avec le bon CSS, vous pouvez utiliser différentes tailles d'image selon les appareils. Vous pouvez choisir de laisser le navigateur redimensionner les images en fonction de l'appareil, et beaucoup d'entreprises le font. Le problème est que cela peut nuire à la netteté et à la vitesse de chargement. Cependant, cela pourrait ne pas être si grave, sachant qu'Internet devient de plus en plus rapide.

Vous aurez besoin d'une image relativement grande et de haute résolution (par exemple supérieure à 2000 px). L'astuce est de la compresser d'environ 70 %. Vous pouvez ainsi réduire la taille du fichier tout en préservant l'intégrité et la qualité de l'image.

Il est toujours préférable de commencer avec une image d'une largeur de 2 000 px. À part cela, l’outil de création de sites de Limecube ne vous oblige pas à optimiser vos images, car la plateforme le fait pour vous en convertissant les images de bannière en WebP pour un chargement rapide des pages. Les images se redimensionnent aussi automatiquement en fonction de l’appareil.

Heureusement, il existe une tonne de compresseurs d’images gratuits, alors compressez vos grandes images pour une optimisation maximale.

Pour être précis, vérifiez les informations de votre thème Shopify concernant les tailles d’images.

Maintenant que vous avez compris le concept des hero images, passons en revue quelques sources d'inspiration. Voici quelques-unes de nos préférées !

L'hero image axée uniquement sur le produit — elle ne montre que le produit.

L'hero image émotionnelle — elle représente une forte émotion.

L'hero image illustrative — elle utilise l'illustration pour transmettre le message.

Passons en revue quelques images hero pour mobile tant qu'on y est. Elles ont toutes le même impact, tout en étant adaptées à une taille plus petite.

Axée sur le CTA – le CTA est le principal moteur de cette image.

Image du produit centrée – l'image hero est placée entre le menu et le texte.  

Utilisation de la vidéo – certaines images hero sont remplacées par une vidéo promotionnelle.

Nous avons constaté que de nombreuses images individuelles sont utilisées. Parfois, cependant, une marque utilisera un collage ou une galerie de photos comme image phare.

Overtone, par exemple, utilise quelques images pour présenter son nouveau produit aux côtés de vrais utilisateurs.

Il y a aussi des entreprises qui utilisent un carrousel d'images ou une galerie faisant défiler les images afin d'offrir davantage d'effets visuels à l'utilisateur. On le voit grâce aux flèches situées de chaque côté et aux points en bas de l'image.

D'où obtenez-vous les images à utiliser ? Dans de nombreux cas, vous pouvez créer votre propre contenu. Parfois, vous pouvez même utiliser du contenu généré par les utilisateurs. Mais si vous voulez tenter votre chance avec des photos gratuites et libres de droits, vous avez de nombreuses options.

De nombreux sites d'images gratuits proposent des images libres de droits que vous pouvez utiliser sur votre site web. Dans de nombreux cas, vous pouvez trouver d'excellentes photos que vous pourrez personnaliser pour votre entreprise.

Quelques sites très appréciés incluent :

Pikwizard – Celui-ci est gratuit et propose plus d'un million de photos. Vous pouvez même obtenir des vecteurs et des illustrations gratuits.

Design Wizard – Il existe une option gratuite, mais vous pouvez passer à une formule payante pour avoir encore plus de contenu. Cet outil propose de nombreuses images gratuites et des options d'édition ; ça vaut le coup d'y jeter un œil.

Ça n’a pas besoin d’être compliqué : comme vous pouvez le voir, vous avez plein d’options pour créer la meilleure image d’en-tête pour votre site. Assurez-vous simplement de tenir compte de la taille de l’écran et du temps de chargement, et le reste viendra tout seul.