Art direction : pourquoi la même image hero ne fonctionne jamais sur mobile et sur desktop

Une image hero conçue pour un écran de 1 600 pixels de large place souvent une personne ou un produit sur un tiers de la largeur, avec le titre et le CTA sur le reste. Rétrécie telle quelle pour un écran de 375 pixels, cette composition ne tient plus : soit le sujet devient minuscule et illisible, soit on la recadre au centre et on perd justement l’espace négatif où vivait le texte. Le réflexe « on la redimensionne, next/image ou srcset s’occupe du reste » règle un problème de poids et de résolution — pas un problème de cadrage. Ce que la composition doit changer d’un écran à l’autre, en design responsive, porte un nom précis : l’art direction.

Redimensionner n’est pas recadrer

Les attributs srcset et sizes, détaillés dans notre article sur l’optimisation des images, servent à proposer plusieurs résolutions de la même photo, avec le même cadrage : le navigateur choisit celle qui correspond à la largeur d’affichage et à la densité de l’écran, pour ne pas télécharger 1 920 pixels de large sur un téléphone qui n’en affichera que 400. C’est un problème de poids. L’art direction répond à un problème différent : la photo elle-même doit changer — recadrage plus serré, sujet recentré, parfois un visuel entièrement différent — parce que la composition qui fonctionne à côté d’un bloc de texte sur deux colonnes ne fonctionne plus une fois le texte empilé au-dessus ou en dessous de l’image sur mobile.

L’outil natif : la balise <picture>

HTML fournit un élément conçu exactement pour ça. Contrairement à srcset sur un simple <img>, où le navigateur choisit selon la taille du fichier, l’élément <picture> permet de conditionner le choix à une media query explicite :

• <source media="(min-width: 768px)" srcset="hero-desktop.webp"> — le crop large, utilisé à partir de la tablette.
• <source media="(max-width: 767px)" srcset="hero-mobile.webp"> — un crop distinct, recentré sur le sujet.
• <img src="hero-desktop.jpg" alt="…"> en dernier enfant, comme repli pour les navigateurs qui ignorent <picture> et pour le texte alternatif.

Le point important, et souvent ignoré : le préchargeur du navigateur évalue les conditions media avant de lancer le moindre téléchargement. Une seule des deux images part sur le réseau — jamais les deux.

L’erreur qui double le poids de la page

Le remplacement le plus courant de <picture>, sur une landing page construite avec Tailwind, ressemble à ceci :

• <img className="hidden md:block" src="hero-desktop.jpg" />
• <img className="md:hidden" src="hero-mobile.jpg" />

Ça s’affiche correctement à l’écran, donc ça passe la relecture visuelle sans que personne ne s’en aperçoive. Le problème est invisible à l’œil et bien réel sur le réseau : display: none masque l’élément après le rendu, mais l’attribut src déclenche la requête avant que le CSS ne soit appliqué. Le navigateur télécharge donc les deux images, sur mobile comme sur desktop, et n’en affiche qu’une. C’est exactement le genre de cause invisible que nous détaillons dans notre article sur le LCP : une image hero deux fois plus lourde que nécessaire, chargée en pure perte.

Next.js et next/image : où s’arrête l’automatisation

Le composant next/image excelle sur l’axe résolution/poids : il génère automatiquement un srcset de la même image à plusieurs tailles et choisit le bon format (WebP, AVIF) selon le navigateur. Il ne génère en revanche pas de <picture> avec plusieurs sources conditionnées par media query — ce n’est pas son rôle, et il n’existe pas de prop officielle pour ça. Pour une vraie art direction sous Next.js, deux options tiennent la route : écrire la balise <picture> à la main avec des fichiers déjà optimisés (exportés une fois en WebP/AVIF aux deux cadrages, via un script de build ou directement depuis l’outil de design), en passant unoptimized à un éventuel <Image> de repli ; ou, pour un visuel purement décoratif sans valeur informative propre, un arrière-plan CSS avec image-set() et des media queries, qui bénéficie du même comportement de chargement conditionnel que <picture>.

Le lien avec le budget data du visiteur mobile

Ce n’est pas qu’une question de score PageSpeed. Une étude parue dans Information Systems Research, menée par Xiaopeng Luo, Cheng He, Yu Jeffrey Hu, Xitong Li et Yuan Cheng sur les réservations d’une application hôtelière, montre que les visiteurs en données mobiles affichent environ deux fois plus de sensibilité au prix que ceux en Wi-Fi, un écart attribué au coût perçu de la consommation de données (Luo et al., Information Systems Research). Une image hero deux fois trop lourde, comme dans l’erreur décrite plus haut, ne fait donc pas que ralentir l’affichage : elle s’ajoute au forfait data du visiteur au moment précis où vous lui demandez de sortir sa carte bancaire. L’art direction, en servant un crop réellement plus léger sur mobile plutôt qu’une version simplement rétrécie, agit sur ce coût perçu autant que sur le LCP.

Ne pas perdre le message dans le recadrage

Recadrer plus serré pour gagner en légèreté a une contrepartie : le risque de sacrifier justement l’élément qui devait convaincre. Jan Panero Benway a montré, dans une étude restée une référence sur l’attention visuelle en ligne, que des visiteurs manquent des éléments pourtant visuellement mis en avant lorsqu’ils sont concentrés sur une autre tâche — l’effet qu’elle a nommé la « cécité aux bannières » (Benway, 1998), que nous développons aussi dans notre article sur la cécité aux bannières. Un recadrage mobile qui repousse ou réduit le titre pour laisser toute la place au sujet de la photo aggrave ce risque plutôt que de le compenser. La parade la plus fiable : garder le titre et le CTA en HTML réel, superposés à l’image plutôt qu’incrustés dedans, pour que le recadrage de la photo ne touche jamais au texte qui porte le message.

Sur quelles images le faire — et sur lesquelles s’en passer

L’art direction a un coût : deux exports à produire et à maintenir au lieu d’un, deux fichiers à mettre à jour à chaque refonte visuelle. Elle se justifie sur l’image hero du premier écran, quand la composition desktop place réellement le sujet de façon asymétrique — une personne sur le côté, un produit décalé pour laisser la place au texte. Elle ne se justifie presque jamais sur les images de contenu plus bas dans la page (logos clients, captures d’écran, photos de témoignages) : là, un simple redimensionnement via srcset suffit, parce que la composition d’origine reste lisible à n’importe quelle largeur.

Méthode en 4 étapes

1. Repérez les images dont la composition desktop est asymétrique (sujet décalé, texte en incrustation) plutôt que centrée — ce sont les seules candidates légitimes à l’art direction.
2. Demandez deux exports distincts au designer (ou recadrez vous-même) : un cadrage large pour desktop/tablette, un cadrage resserré et recentré pour mobile, chacun en WebP et AVIF.
3. Implémentez avec <picture> et des <source media>, ou avec image-set() en arrière-plan CSS pour un visuel purement décoratif — jamais avec deux balises <img> simplement masquées en CSS.
4. Vérifiez dans l’onglet réseau des outils de développement, en émulant un mobile, qu’une seule des deux images part effectivement sur le réseau — pas les deux.

Les dix templates LanderKit livrent déjà cette logique sur leurs sections hero — le crop resserré sur mobile du template E-commerce mono-produit (démo) en est un bon exemple, tout comme la photo recentrée du template Coach & Consultant. De quoi partir d’une base déjà pensée pour l’art direction plutôt que de la retrofitter sur une maquette existante.