Pour servir une image adaptée, proposez des fichiers cohérents avec la place qu'elle occupe et vérifiez celui que le navigateur reçoit. Ajouter srcset ne suffit pas si sizes décrit une largeur sans rapport avec la mise en page. Commencez par observer le composant à plusieurs largeurs.
Séparer taille du fichier et taille d'affichage
Notez les dimensions de la ressource, la largeur visible de l'image et les points où la disposition change. Une carte peut occuper presque tout l'écran sur mobile, puis une fraction de la grille sur grand écran. Son fichier ne doit pas être choisi uniquement à partir de la largeur totale de la fenêtre.
La documentation MDN sur les images responsives explique les candidats srcset et l'indication sizes. Avec des descripteurs de largeur, ces informations aident le navigateur à choisir une ressource ; elles ne remplacent pas les règles CSS de disposition.
Préparer des variantes cohérentes
Partez d'un original utilisable et créez des variantes qui conservent le cadrage attendu. Vérifiez leur qualité à la taille d'affichage visée. Une image plus petite mais illisible ne répond pas au besoin. N'agrandissez pas artificiellement un petit original pour produire une grande variante sans détail supplémentaire.
Nommez les fichiers de manière compréhensible et conservez leur largeur réelle dans votre inventaire. Une étiquette incorrecte dans srcset peut rendre le choix incohérent. Si le cadrage change selon le contexte, traitez cette intention séparément d'un simple changement de résolution.
Exemple original : une carte qui change de largeur
Supposons, pour un exercice fictif, une carte large de 360 pixels CSS sur une petite fenêtre et de 300 pixels dans une grille large. Préparez l'inventaire des fichiers disponibles, puis décrivez l'espace occupé selon les règles réelles du composant. Ces dimensions sont des hypothèses de maquette, pas des recommandations universelles.
Le contrôle comporte trois observations : largeur rendue dans la page, valeur currentSrc de l'image et requête reçue dans le réseau. Rechargez avec des conditions documentées avant de comparer. Le navigateur peut conserver une ressource déjà chargée, ce qui rend trompeuse une simple réduction de fenêtre après la première visite.
Conservez une capture du composant et le nom du fichier choisi. Si une petite carte reçoit systématiquement la variante la plus grande, inspectez les indications de taille et les conditions de l'essai avant d'accuser le navigateur.
Recontrôler le rendu et le chargement
Gardez des dimensions ou un espace cohérents pour éviter que l'arrivée de l'image bouleverse la page. Vérifiez aussi l'alternative textuelle et le recadrage : une livraison techniquement légère ne doit pas supprimer une information utile.
Si cette image est le principal élément visible, poursuivez avec le diagnostic du LCP. Si les fichiers viennent d'une maquette, fixez une convention pour exporter les assets Figma afin que les développeurs disposent des bons originaux et des bonnes variantes.
Questions fréquentes
Sizes impose-t-il la largeur CSS de l'image ?
Non. Il renseigne le choix de ressource dans les cas concernés. La disposition visible reste déterminée par le document et ses styles, qui doivent être cohérents avec cette indication.
Faut-il produire une variante pour chaque appareil ?
Non. Raisonnez sur les besoins du composant et ses largeurs d'affichage. Une collection de fichiers par modèle d'appareil devient vite difficile à maintenir et ne couvre pas les fenêtres intermédiaires.
Comment vérifier une image déjà en cache ?
Notez cet état et effectuez un essai séparé avec un chargement neuf lorsque nécessaire. Ne comparez pas sans le dire une ressource déjà présente et une première récupération réseau.
Sources
Documentation consultée lors de la relecture du 10 septembre 2026.