Ressources · 98
Images responsives : vérifier srcset, sizes et le recadrage
Livrer une variante adaptée sans perdre le sujet, la lisibilité ni la stabilité de la page.
· 3 min
Ce que ce guide permet
- Mesurer l’emplacement réel
- Distinguer résolution et composition
- Préserver sujet et dimensions
- Contrôler ce qui est chargé
- Tester qualité et chargement
Contrôle express
- sizes doit-il toujours valoir 100vw ?
- Le mobile peut-il avoir un autre cadrage ?
- Comment confirmer le fichier utilisé ?
Méthode pas à pas
- 01
Mesurer l’emplacement réel
Relevez la largeur de l’image dans chaque mise en page, pas seulement la fenêtre. Une colonne peut occuper une fraction de l’écran. Prévoyez texte, zoom et petits appareils dans la recette.
Livrable : Largeurs et ratios relevés.
- 02
Distinguer résolution et composition
Avec srcset et sizes, proposez des résolutions cohérentes avec la place affichée. Utilisez picture lorsqu’un recadrage ou format doit changer. Gardez une image de repli et une alternative adaptée au rôle.
Livrable : Variantes et conditions de sélection.
- 03
Préserver sujet et dimensions
Comparez les recadrages : étiquette produit, sujet pertinent ou légende ne doivent pas disparaître. Réservez l’espace selon le ratio affiché ; une composition différente peut nécessiter une règle de ratio spécifique.
Livrable : Recadrages et espace réservés.
- 04
Contrôler ce qui est chargé
Relevez currentSrc, dimensions intrinsèques, place affichée et poids transféré dans le navigateur. Rejouez avec cache maîtrisé et densités pertinentes. Une image réduite par CSS peut rester un fichier très lourd.
Livrable : Fichier réellement transféré.
- 05
Tester qualité et chargement
Vérifiez texte, contrastes, transparence et artefacts au rendu final. Évitez de retarder une image essentielle visible au chargement. Contrôlez aussi les médias secondaires, sans rendre leur accès dépendant d’un script fragile.
Livrable : Recette qualité et chargement.
Scénarios fictifs de recette
Ces cas proposés ne sont pas des observations de clients. Adaptez les données, permissions et critères à votre environnement autorisé.
| Situation à provoquer | Résultat à vérifier | Preuve à conserver |
|---|---|---|
| Une carte occupe 320 pixels CSS mais sizes annonce toute la fenêtre. | Comparer largeur affichée et déclaration pour éviter une sélection inutilement lourde ; tester plusieurs densités et fenêtres. | Largeur mesurée, currentSrc, dimensions et octets transférés. |
| Un recadrage mobile retire le détail nécessaire pour comprendre une scène. | Choisir un cadrage adapté au contexte ou une variante éditoriale, puis relire l’alternative. | Captures aux points de rupture et information encore visible. |
| Une image arrive après le texte sans espace réservé. | Définir dimensions ou ratio adaptés et observer la stabilité réelle, sans charger toutes les images en priorité. | Dimensions, ordre de chargement et observation des déplacements. |
Fiche de travail à réutiliser
À compléter avec vos observations autorisées. Ces champs constituent une trame de travail, pas des résultats observés.
| Champ | Information à consigner |
|---|---|
| Emplacement | Largeurs et ratios par mise en page |
| Variantes | Formats, dimensions et poids |
| Sélection | srcset, sizes, picture et fichier reçu |
| Qualité | Sujet, alternative, zoom et chargement |
Exemple d’application
Situation illustrative
Exemple fictif : une carte de 340 px reçoit un fichier de 2 400 px prévu pour une page pleine largeur.
Décision et preuve attendue
La recette corrige la description de l’emplacement, propose plusieurs variantes et vérifie le fichier choisi sans retirer le détail nécessaire.
Distinguer les mécanismes
| Mécanisme | Utilité | Point de vigilance |
|---|---|---|
| srcset et sizes | Sélection de résolution | Décrire la place réelle |
| picture | Format ou direction artistique | Conserver un repli img |
| CSS | Taille et cadrage à l’écran | Ne réduit pas seul le transfert |
Indicateurs de pilotage
| Indicateur | Ce qu’il mesure | Première action |
|---|---|---|
| Octets transférés | Coût de la variante reçue | Comparer à l’usage réel |
| Lisibilité | Information conservée au rendu | Revoir recadrage ou compression |
| Stabilité | Espace réservé avant réception | Corriger dimensions et ratios |
Erreurs fréquentes
- Décrire la place réelle
- Conserver un repli img
- Ne réduit pas seul le transfert
Questions fréquentes
sizes doit-il toujours valoir 100vw ?
Non. Décrivez la largeur de l’emplacement : une carte ou une colonne ne remplit pas forcément la fenêtre.
Le mobile peut-il avoir un autre cadrage ?
Oui si l’information utile reste préservée. Vérifiez ratio, alternative et sujet dans chaque composition.
Comment confirmer le fichier utilisé ?
Inspectez currentSrc et la requête réellement transférée, dans les conditions de cache et d’écran testées.
Lectures et outils complémentaires
Repères éditoriaux pour prolonger la méthode.
- Française du Numérique — carnet de recette Lien externe
Pour consigner les essais, anomalies et preuves dans une revue de site plus large.
Références officielles
Date de consultation des références : . La méthode et la fiche de travail proposent des contrôles à adapter à votre contexte ; elles ne constituent pas une certification.
Pour aller plus loin
Analyses associées
