En parcourant quelques boutiques en ligne, vous remarquerez un élément majeur qu’elles ont toutes en commun : une grande image mise en avant (ou une série d’images), affichée de manière proéminente sur la page d’accueil.
Ces images peuvent être appelées hero images, hero header, bannières ou encore carrousels. Peu importe le nom que vous leur donnez, les hero images jouent un rôle très important pour les entreprises d’e-commerce.
Dans cet article, nous allons examiner l’importance des hero images, vous présenter quelques bonnes pratiques pour les utiliser, ainsi que des outils et ressources graphiques pour vous aider à créer des hero images convaincantes pour votre boutique en ligne.
Qu’est-ce qu’une hero image ?
Une hero image est une grande image qui apparaît en haut d’une page web. Les hero images peuvent figurer sur différentes pages d’un site, mais elles sont le plus souvent utilisées sur la page d’accueil, juste en dessous de l’en-tête et de la barre de navigation.
Une hero image occupe le plus grand espace sur votre page d’accueil. D’une certaine manière, elle remplit la même fonction qu’une landing page. Votre hero image constitue une première impression pour votre marque, ce qui en fait un atout précieux pour votre entreprise si elle est utilisée correctement.
Que doit inclure une bonne hero image ?
Les hero images les plus efficaces se composent généralement de trois éléments :
- Une image accrocheuse
- Un texte convaincant
- Un appel à l’action (CTA) fort
Une combinaison réfléchie de chacun de ces éléments peut donner une hero image persuasive qui incite le visiteur à agir comme vous le souhaitez, ce qui contribue ensuite à augmenter les taux de conversion. Vous verrez comment ces éléments fonctionnent ensemble dans les exemples d’hero images ci-dessous.
Examinons de plus près ces trois éléments essentiels :
1. Une image accrocheuse
L’œil humain aime les grandes images audacieuses et lumineuses. Que vous utilisiez des graphiques, des photographies ou des illustrations dépend de votre marque, mais ce qui est toujours important, c’est que vos images soient en haute définition et attirent l’attention.
Les hero images doivent être les éléments les plus proéminents de votre page d’accueil, ce qui est à garder à l’esprit lors de la conception de votre page d’accueil.
Tous les thèmes Shopify prévoient une grande section pour les hero images, avec une suggestion de résolution pour que vous sachiez exactement comment dimensionner vos hero images. Certains thèmes incluent même des fonctionnalités supplémentaires pour les diaporamas d’hero images, les vidéos en bannières et les animations sur la page.
Ressources et banques d’images
Si vous envisagez de prendre votre propre photographie de produit, assurez-vous d’avoir fait suffisamment de recherches pour savoir comment capturer des images professionnelles et de haute qualité. Si vous souhaitez gagner du temps, envisagez d’utiliser des banques d’images.
Il existe de nombreux sites en ligne où vous pouvez trouver des images professionnelles et de haute qualité pour votre site web. Pour faciliter vos recherches, nous avons listé quelques-unes des meilleures sources pour trouver votre prochaine image :
Ressources d’images gratuites et libres de droits
Si vous recherchez des photos et illustrations gratuites, voici quelques options à considérer :
- Burst par Shopify : Burst est une banque d’images conçue par des entrepreneurs, pour les entrepreneurs. Sur Burst, vous pouvez trouver des photos de produits en haute définition et des images de style de vie idéales pour les campagnes marketing et les réseaux sociaux. Si vous avez une boutique Shopify, vous pourrez ajouter des photos de Burst directement depuis l’éditeur de thème.
- Pexels : Pexels abrite des milliers d’images gratuites, mises en ligne par des utilisateurs ou provenant d’autres sites d’images gratuites.
- Unsplash : Unsplash propose plus de 2 millions d’images gratuites et en haute définition provenant de sa communauté de photographes.
- Pixabay : Pixabay héberge des images gratuites que vous pouvez utiliser à des fins commerciales et non commerciales. Notez cependant que certaines images sont protégées par des droits de marque déposée, de publicité ou de vie privée.
- Stockvault : Stockvault propose des photos gratuites ainsi que des mises en page de design web et des modèles de logo.
- Canva : Canva est un outil de design de site web tout-en-un qui inclut également une collection de photos gratuites et payantes pour un usage commercial.
- Stocksnap : Stocksnap propose une large variété de photos gratuites que vous pouvez utiliser pour des projets commerciaux et non commerciaux.
Ressources d’images payantes
Si vous avez un budget pour vos hero images, envisagez certaines des meilleures ressources payantes pour des images et photos de qualité supérieure.
- Shutterstock : Shutterstock possède une vaste bibliothèque de plus de 300 millions d’images provenant de photographes du monde entier, ce qui en fait la ressource idéale pour la photographie de voyage.
- Adobe Stock : Conçu pour fonctionner avec la suite d’outils de design d’Adobe, Adobe Stock abrite des milliers de photos, de modèles de design d’hero images, de vidéos, de dessins vectoriels et d’illustrations.
- Getty Images : Bien que plus cher, Getty Images possède une vaste archive de photographies contemporaines et historiques disponibles à l’achat.
- iStock : iStock appartient à Getty Images, alors vous pourriez voir un certain chevauchement en termes de photos disponibles. Cependant, iStock permet aux photographes de vendre leurs photos sur d’autres plateformes, vous y trouverez donc une collection plus large et plus contemporaine que sur Getty.
- Dreamstime : Dreamstime propose un grand choix de photos, de vidéos, de dessins vectoriels et d’illustrations, à la fois gratuites et payantes, avec différentes options de licence.
Photographe professionnel en freelance
Bien sûr, les photos de banques d’images resteront toujours quelque peu limitées. Si vous avez un peu de temps et peut-être un budget plus conséquent, envisagez d’engager un photographe professionnel pour prendre vos propres photos.
Voici quelques autres options pour trouver des photographes freelances :
- Engager un expert Shopify : Utilisez Shopify Experts pour trouver des freelances et des agences spécialisées dans des disciplines spécifiques comme la retouche photo et la photographie de produit. Vous pouvez même engager des freelances en fonction de leur expérience sectorielle, donc si vous avez besoin d’un photographe culinaire, vous pouvez chercher un spécialiste de ce domaine.
- Fiverr : Fiverr propose une grande variété d’indépendants spécialisés dans tous les domaines, de la photographie de produit au webdesign.
- Freelancer : La base de données de Freelancer comprend des experts dans un large éventail de domaines créatifs, tels que la photographie et l’illustration.
- Upwork : Upwork permet aux entrepreneurs de publier des offres d’emploi et de se connecter avec des freelances ayant l’expérience et les compétences nécessaires pour les aider.
- Guru : Guru propose des photographes freelances spécialisés dans tous types de photographie, comme la photographie de mode, la photographie de rue, la photographie de paysage, et bien plus encore.
2. Un texte convaincant
Dans la publicité et le marketing, la copy désigne le contenu écrit d’un support médiatique. Pour les entrepreneurs, le copywriting est une compétence utile à avoir dans votre arsenal.
Les utilisateurs ne jettent qu’un coup d’œil à votre hero image avant de passer à autre chose, vous n’avez donc que quelques secondes (au maximum) pour capter leur attention. Un bon texte doit répondre aux besoins des clients tout en étant facile à comprendre.
Voici quelques conseils rapides pour rédiger un texte convaincant :
- Soignez la concision : Le texte long a sa place, mais une hero image ne s’y prête pas. Le texte de la bannière doit être percutant et direct.
- Évitez les polices difficiles à lire : Les polices peu courantes peuvent prendre plus de temps à lire. Bien que la différence de temps de lecture puisse être minime, chaque milliseconde compte en matière de texte d’image de bannière.
- Reproduisez le ton de vos clients : Les utilisateurs ont tendance à être plus réceptifs à un langage qui leur semble familier. Étudiez le langage utilisé par votre public cible sur les réseaux sociaux et utilisez-le pour adapter votre style d’écriture.
- Concentrez-vous sur les avantages, pas sur les caractéristiques : Au lieu de dire : « Notre équipe de support client est disponible 24h/24 et 7j/7 pour répondre à vos questions », essayez plutôt « Obtenez des réponses rapidement, 24h/24 et 7j/7 ».
- N’ayez pas peur de tester différents textes : Les hero images sont des candidates idéales pour les tests A/B, car différents choix de mots peuvent considérablement modifier la manière dont vos visiteurs interagissent avec le design de votre hero image.
- Évitez les mots à la mode et les clichés marketing : Les utilisateurs attardent rarement leur regard sur des slogans publicitaires couramment utilisés tels que « satisfaction garantie ».
3. Un appel à l’action fort
Enfin, toutes les hero images doivent comporter un appel à l’action (CTA) efficace. Un CTA est le texte qui indique au lecteur quelle action vous souhaitez qu’il prenne, généralement accompagné d’un bouton qui exécute cette action. Les plus courants sont « Découvrir », « Signer la pétition » ou « En savoir plus ».
La manière dont vous rédigez votre appel à l’action dépend du segment que vous visez dans votre tunnel de conversion. Si vous vous adressez à des utilisateurs à l’entrée du tunnel, vous pourriez leur proposer « En savoir plus », tandis que pour les utilisateurs qui s’approchent du bout, le CTA pourrait être un « Acheter ici » plus direct.
Comprendre l’objectif de votre hero image
Vous pouvez utiliser ce précieux espace de plusieurs manières, en fonction de votre entreprise et de vos objectifs. Examinons quelques-unes des approches les plus courantes pour utiliser les hero images ci-dessous :
1. Pour aider à construire votre marque et raconter votre histoire
Une utilisation potentielle de votre hero image pourrait être le storytelling de marque. Le storytelling de marque consiste à utiliser la narration pour communiquer votre unique selling proposition. Le récit est une méthode très efficace pour construire une marque, car on a tendance à mieux se souvenir d’une bonne histoire.
2. Pour répondre aux questions des clients
Une autre approche courante consiste à mettre en avant des réponses à une question fréquemment posée. Vous pourriez aborder un problème courant pour les clients ou utiliser cet espace pour répondre à des questions urgentes que vos visiteurs pourraient avoir.
3. Pour mettre en avant votre proposition de valeur
Le storytelling de marque n’est pas la seule façon de présenter votre unique selling proposition. Vos visiteurs se souviendront mieux de votre marque s’ils comprennent ce qui la distingue de la concurrence. Quel meilleur endroit pour expliquer votre proposition de valeur à vos clients que sur votre page d’accueil, où arrivent la majorité des visiteurs ?
Vous souhaitez en savoir plus ? Consultez notre article Création d’une identité visuelle pour sa marque : conseils et outils gratuits
4. Pour faire une annonce
Votre hero image est un espace clé pour promouvoir des soldes, des événements, des lancements de produits et d’autres annonces importantes. Les images en bannière attirent la majorité de l’attention de vos visiteurs, donc vous souhaitez voir une annonce largement diffusée, elle a toute sa place dans le contenu de hero header.
Optimisez votre site web avec une hero image époustouflante
Voilà, vous savez tout : la raison, l’objectif et les utilisations d’une hero image sur votre page d’accueil. Changer ces images fréquemment permet à votre boutique de rester d’actualité pour les visiteurs réguliers, et d’inciter les visiteurs à entreprendre les actions qui sont les plus en phase avec vos objectifs de conversion.
Comment créer une hero image pour votre boutique en ligne
Créer une hero image bien conçue et accrocheuse contribue à attirer de nouveaux visiteurs sur votre site et à les inciter à explorer davantage vos produits. Consultez ce guide étape par étape pour créer une hero image pour votre boutique en ligne.
1. Utilisez des images de produit de haute qualité
Attirez de nouveaux clients avec des photos époustouflantes de vos produits ou de votre magasin physique. Vous pouvez toujours utiliser des photographies de banques d’images professionnelles ici, mais si vous le pouvez, mieux vaut engager un photographe pour prendre des photos de haute qualité de vos produits spécifiques.
Voici un excellent exemple d’une boutique en ligne de plantes. Toute personne visitant ce site est probablement intéressée par les plantes et sera facilement attirée par le vert luxuriant de son hero image.
2. Créez une illustration à l’aide d’un outil de design en ligne
Vous pouvez égayer vos photos de produit ou même créer une hero image de toute pièce en utilisant des éléments graphiques. Trouvez un outil de design en ligne comme Canva, Visme ou Adobe Cloud, et assemblez une illustration qui attire l’œil.
Voici un excellent exemple de ce à quoi cela pourrait ressembler : Detour Coffee a créé une découpe de son produit et l’a placée sur un fond avec des couleurs et des formes audacieuses pour attirer l’attention.
3. Ajoutez l’appel à l’action le plus pertinent
Aucune hero image n’est complète sans un appel à l’action (CTA), alors ajoutez un bouton spécifique à l’image que vous avez incluse.
Vous voudrez également vous assurer que votre bouton correspond au design global, afin qu’il ressorte tout en semblant à sa place. Voici un bel exemple de ce que cela pourrait donner :
4. Utilisez une vidéo comme partie de votre hero image
Une autre excellente façon d’attirer l’attention est de créer une vidéo en boucle, sans son, pour votre hero image. Par exemple, le site de Nomz propose plusieurs clips vidéo qui apparaissent, attirant le visiteur du site et l’incitant à rester plus longtemps sur la page pour regarder la scène entière.
5. Mettez régulièrement à jour votre hero image
Votre hero image n’est pas une bannière que vous oubliez après l’avoir installée. Même si vous adorez celle que vous avez, vous devrez la mettre à jour de temps en temps pour présenter de nouveaux produits et offres à vos clients récurrents.
Vous pourriez même envisager de créer un diaporama d’hero images afin de pouvoir partager plusieurs appels à l’action à la fois. C’est une excellente idée lorsque vous souhaitez promouvoir une fête à venir, comme nous le voyons dans l’exemple ci-dessous, tout en continuant à exposer d’autres gammes de produits.
FAQ sur les hero images de site web
Comment ajouter une hero image à mon site web ?
Si vous utilisez un thème Shopify, vous pouvez ajouter votre hero image dans l’éditeur de thème. Connectez-vous à votre boutique Shopify et allez dans Boutique en ligne > Thèmes et sélectionnez « Personnaliser » à côté de votre thème actuel.
La plupart des thèmes ont par défaut un espace pour une bannière, mais si vous devez l’ajouter, sélectionnez « Ajouter une section » en bas de votre menu de droite, puis sélectionnez la section de hero. Cet élément peut être étiqueté hero image, image de bannière ou diaporama selon le thème que vous utilisez.
Notez également que les hero images de site web ne se transfèrent pas entre les thèmes comme les images de produits et les images de blog en ligne. Les hero images doivent être ajoutées directement dans chaque thème séparément et n’apparaîtront sur la page que si vous les ajoutez à votre thème actuel.
Quelle taille doit avoir une hero image sur un site web ?
Vous pouvez ajouter des fichiers PNG et JPEG allant jusqu’à 20 Mo, mais il est conseillé de privilégier les fichiers légers pour garantir des temps de chargement raisonnables. Les tailles d’image exactes dépendront du thème que vous utilisez, mais en général, les hero images doivent faire au moins 2 048 pixels de large pour s’afficher en haute définition lorsqu’elles sont vues en plein écran.
Gardez à l’esprit que les thèmes sont responsive, ce qui signifie que l’espace réservé pour les hero images change en fonction des tailles d’écran sur lesquelles le site est consulté. Assurez-vous de laisser de l’espace autour du cadre de votre image pour tenir compte des parties qui pourraient être coupées.
Vous devez également éviter d’insérer votre texte et votre CTA directement dans l’image. Utilisez plutôt votre éditeur de thème pour superposer du texte et des boutons CTA qui flotteront par-dessus votre image et s’ajusteront indépendamment de celle-ci.
Quel est l’objectif d’une hero image de site web ?
Les hero images de site web servent pour un large éventail d’objectifs, mais en général, elles sont idéales pour toute annonce que vous souhaitez faire à un maximum de visiteurs. Les objectifs courants incluent l’annonce de soldes, la mise en avant de vos valeurs de marque ou l’annonce de nouveaux produits.
Que doit contenir une hero image ?
Une hero image de site web doit contenir une grande image qui attire l’œil, accompagnée d’un texte concis et convaincant ainsi que d’un appel à l’action fort.
