Image hero de landing page : photo, illustration ou capture d'écran ?

L'image hero — le visuel principal en haut de page, à côté ou derrière le titre — occupe la moitié de l'écran le plus précieux de votre landing page : celui que 100 % des visiteurs voient, avant tout scroll. C'est pourtant souvent l'élément choisi en dernier, à la va-vite, dans une banque d'images. Ce guide passe en revue les quatre options réelles — photo humaine, capture produit, illustration, absence d'image — et les critères pour choisir selon votre offre, en complément de notre article sur la ligne de flottaison, qui traite de tout ce que cet écran doit contenir.

Ce que l'image hero doit accomplir (et ne pas accomplir)

L'image hero a un seul travail : faire comprendre plus vite ce que la page vend, ou pour qui. Elle ne doit ni décorer, ni « habiller », ni gagner un prix de direction artistique. Le test est simple : si on remplace votre image par un rectangle gris, la page perd-elle du sens ? Si la réponse est non, l'image ne travaille pas — elle occupe seulement l'espace le plus cher de la page. Ce rôle de support du message est documenté de longue date : une étude de Terry Childers et Michael Houston publiée en 1984 dans le Journal of Consumer Research sur l'effet de supériorité de l'image montre que les contenus présentés visuellement sont mieux mémorisés que les mêmes contenus présentés en texte seul — à condition que l'image porte le sens, pas qu'elle l'accompagne vaguement. Une image qui montre le produit ou le résultat fait mémoriser l'offre ; une image d'ambiance générique ne fait rien mémoriser du tout.

Option 1 : la capture ou mise en situation du produit

Pour un SaaS, une application ou un produit physique, montrer le produit est presque toujours le meilleur choix : une capture d'interface propre, un mockup sur l'appareil cible, ou le produit en usage. C'est l'option qui répond le plus vite à la question « qu'est-ce que c'est ? » — et elle se renforce en version animée courte, comme le détaille notre article sur la vidéo en landing page. Deux pièges : la capture d'écran brute et illisible (réduite, elle doit encore montrer quelque chose de compréhensible — au besoin, zoomez sur la partie de l'interface qui porte la promesse), et le mockup mensonger qui embellit des fonctionnalités inexistantes, qui se paie à l'onboarding.

Option 2 : la photo humaine

Pour les services, le coaching, la formation — tout ce qui se vend sur la confiance en une personne —, la photo humaine est l'option la plus forte, à une condition non négociable : que ce soit une vraie photo de vous ou de vos clients, pas une banque d'images. Les visages attirent puissamment l'attention : une étude de Saeideh Bakhshi, David Shamma et Eric Gilbert publiée en 2014 (conférence CHI), portant sur plus d'un million de photos Instagram, a mesuré que les images contenant un visage reçoivent significativement plus d'engagement que les autres, indépendamment du reste du contenu. Sur une landing page, ce pouvoir d'attraction se pilote : un visage qui capte l'attention doit la rendre au message, pas la garder — d'où l'intérêt des compositions où la personne est orientée vers le titre ou le formulaire plutôt que face caméra plein centre. Notre article sur la photo du fondateur détaille ce que cette authenticité change en confiance perçue.

Option 3 : l'illustration

L'illustration convient quand le produit n'a rien à montrer : services immatériels, API, offre en avant-première sans interface présentable. Elle donne une identité visuelle cohérente et évite le piège de la fausse photo. Son risque est l'interchangeabilité : les illustrations vectorielles génériques de personnages — omniprésentes pendant des années — signalent aujourd'hui « startup indifférenciée » plus qu'elles n'expliquent quoi que ce soit. Une illustration ne se justifie que si elle est spécifique à votre offre : un schéma de fonctionnement stylisé, une métaphore visuelle propre à votre promesse. Sinon, l'option 4 est meilleure.

Option 4 : pas d'image du tout

Un hero purement typographique — un titre fort, un sous-titre, un CTA, beaucoup d'espace — est une option légitime et sous-utilisée. Elle concentre toute l'attention sur le message, se charge instantanément, et fonctionne particulièrement bien quand la promesse est le produit : offres de copywriting, outils pour développeurs, positionnements radicaux. C'est aussi l'option par défaut la plus sûre quand la seule alternative est une image de banque générique : entre pas d'image et une image qui ne dit rien, pas d'image gagne. Le fond de couleur n'est pas neutre pour autant — notre article sur la couleur de fond et la perception du prix montre qu'il influence la lecture de l'offre.

Les erreurs qui coûtent le plus cher

• La photo de banque d'images reconnaissable — poignée de main, équipe souriante en réunion : le visiteur l'a déjà vue ailleurs, elle signale l'interchangeable et abîme la crédibilité.
• Le carrousel d'images en hero : personne n'attend la deuxième slide, chaque rotation vole l'attention au message, et le poids se cumule.
• L'image trop lourde : une image hero non compressée retarde le rendu du seul écran que tout le monde voit — elle est presque toujours l'élément LCP de la page, celui que mesure Google (voir notre article sur la vitesse de chargement).
• Le texte incrusté dans l'image : illisible sur mobile, invisible pour les lecteurs d'écran et pour les moteurs de recherche — le message appartient au HTML, pas aux pixels.
• L'image qui contredit le titre : un titre « simplicité » sur une capture d'interface surchargée — le visiteur croit l'image, pas le texte.

Choisir en pratique, puis tester

Le raccourci de décision : produit visible → montrez le produit ; confiance en une personne → vraie photo humaine ; rien à montrer → typographie forte, ou illustration seulement si elle est spécifique. Ensuite, testez : l'image hero est l'un des éléments les plus rentables à A/B tester, parce qu'elle touche 100 % des visiteurs. Un test de 5 secondes suffit d'ailleurs à départager deux options avant tout trafic réel : montrez chaque variante 5 secondes à quelqu'un qui ne connaît pas votre offre et demandez-lui ce que vend la page. Les templates LanderKit — par exemple E-commerce produit pour un hero produit ou Coach & Consultant pour un hero photo humaine — livrent des sections hero déjà composées avec chargement d'image optimisé en Next.js, où remplacer le visuel prend une minute : 89 € l'unité, 229 € le pack de 10.