Cours HTML / Images adaptatives : srcset, sizes et picture

Les images adaptatives offrent au navigateur des fichiers avec différentes résolutions ou compositions afin qu'il puisse en choisir un adapté à l'affichage. Utilisez srcset et sizes pour les choix de résolution de la même image, et picture lorsqu'un écran plus étroit nécessite un recadrage différent.

Obtenez les fichiers d'image d'exemple

Ces exemples utilisent la même photo du lac à trois largeurs et un recadrage carré qui garde l'arbre en évidence. Téléchargez les fichiers dans le même dossier que votre fichier HTML pour tester les URL relatives inchangées. Préparez le fichier, le texte alternatif et les dimensions en utilisant les principes dans Images : img, texte alternatif et dimensions.

• Image de 480 pixels de large
• Image de 960 pixels de large
• Image de 1600 pixels de large
• Recadrage carré de 800×800 pixels

Les trois premiers préservent la scène et le rapport d'aspect. Le fichier carré a une composition différente pour un affichage étroit.

Choisir la résolution de l'image avec srcset et sizes

Les descripteurs 480w, 960w et 1600w dans srcset donnent la largeur réelle en pixels de chaque fichier. sizes décrit la largeur de mise en page attendue de l'image selon différentes conditions de fenêtre d'affichage.

<img class="example-fluid"
  src="html-image-sample-lake-tree-960-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 480w,
          html-image-sample-lake-tree-960-v1.webp 960w,
          html-image-sample-lake-tree-1600-v1.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Un arbre sur un îlot au milieu d’un lac, avec des montagnes à l’arrière-plan"
  width="1600" height="900">

Cela suppose que l'image a environ la même largeur que la fenêtre d'affichage jusqu'à 800 pixels CSS, et qu'elle ne dépasse pas 800 pixels CSS au-delà. Si votre mise en page est différente, modifiez sizes pour qu'elle corresponde. src fournit une solution de repli pour les environnements sans support de srcset.

.example-fluid {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}

Ce CSS s'applique uniquement au premier exemple, qui possède la classe example-fluid. Le navigateur peut également prendre en compte la densité de pixels de l'appareil et le zoom. Un viewport étroit ne garantit donc pas que le fichier de 480 pixels sera choisi. sizes décrit les pixels CSS affichés, et non la largeur du fichier téléchargé.

Utilisez des descripteurs de densité pour une largeur d'affichage fixe

Si une image est toujours affichée à 480 pixels CSS de largeur, vous pouvez proposer des candidats 1x et 2x. N'utilisez pas sizes avec cette forme.

<img class="example-fixed"
  src="html-image-sample-lake-tree-480-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 1x,
          html-image-sample-lake-tree-960-v1.webp 2x"
  alt="Un arbre sur un îlot au milieu d’un lac, avec des montagnes à l’arrière-plan"
  width="480" height="270">

.example-fixed {
  display: block;
  width: 480px;
  height: auto;
}

Le CSS du premier exemple ne s'applique pas à cette image. Ce CSS fixe la largeur affichée à 480 pixels, donc l'image peut déborder d'un conteneur plus étroit. Si la largeur d'affichage doit changer en fonction de la mise en page, utilisez l'approche w et sizes mentionnée plus tôt. Ne mélangez pas les descripteurs w et x dans un même srcset.

Changer le recadrage avec picture

picture peut offrir une composition différente au lieu de simplement une résolution différente. Cet exemple utilise le recadrage carré pour les largeurs de fenêtre jusqu'à 600 pixels et une image au format paysage sinon.

<picture class="example-picture">
  <source media="(max-width: 600px)"
          srcset="html-image-sample-lake-tree-square-800-v1.webp"
          width="800" height="800">
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Un arbre sur un îlot au milieu d’un lac, avec des montagnes à l’arrière-plan"
       width="960" height="540">
</picture>

Choisir un recadrage et ajuster sa largeur d'affichage sont des actions distinctes. Ajoutez ce CSS dans l'élément style du head ou dans la feuille de style liée afin que l'image picture s'adapte à un parent étroit tout en conservant son ratio.

.example-picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

La photo ci-dessus montre le fichier carré utilisé sur les écrans étroits ; cette photo dans l'article elle-même ne change pas en fonction de la largeur de la fenêtre. picture nécessite toujours un élément img avec un contenu de secours et alt. Chaque source fournit une condition et un fichier candidat ; le texte alternatif de l'image appartient à img.

Vérifiez quelle image le navigateur a sélectionnée

Enregistrez les quatre fichiers image, en conservant leurs noms de fichiers, à côté de index.html. Mettez un exemple HTML à l'intérieur de body et son CSS dans un élément style dans head ou dans une feuille de style séparée. Pour tester par rapport à la largeur réelle de la fenêtre sur mobile, ajoutez <meta name="viewport" content="width=device-width, initial-scale=1"> à head.

1. Ouvrez index.html dans un navigateur et ouvrez le panneau Réseau des outils de développement.
2. Changez la largeur de la fenêtre d'affichage, désactivez le cache et rechargez la page. Vérifiez les noms de fichiers des demandes d'image pour voir quels candidats ont été chargés.
3. Pour l'exemple picture, rechargez une fois à une largeur de fenêtre d'affichage de 600 pixels ou moins et une fois au-dessus de 600 pixels. Vérifiez le recadrage carré à la largeur la plus étroite et le fichier paysage à la largeur la plus large.

Vous pouvez également vérifier ces valeurs dans la console. currentSrc montre l'URL de l'image actuellement sélectionnée par le navigateur. La première commande cible l'exemple srcset ; la seconde cible l'exemple picture.

document.querySelector('.example-fluid').currentSrc
document.querySelector('picture img').currentSrc

Même avec la même largeur de fenêtre, la densité de pixels et le zoom peuvent changer quel fichier srcset est sélectionné. Si un fichier plus grand est déjà chargé, réduire la fenêtre ne le remplacera pas immédiatement par un fichier plus petit. Changez les conditions, désactivez le cache et rechargez avant de comparer.

Vérifiez le changement de résolution et la adaptation du cadrage

La fenêtre d'affichage est la zone du navigateur utilisée pour agencer la page. La densité de pixels de l'appareil relie les pixels CSS aux pixels physiques de l'écran. La densité, le zoom et l'état du cache peuvent affecter la sélection de la résolution même à la même largeur de fenêtre d'affichage, donc ne promettez pas un nom de fichier srcset fixe. Testez la condition média de l'adaptation du cadrage séparément du changement de résolution.

Si la mauvaise image est sélectionnée

• Vérifiez que chaque descripteur w correspond à la largeur réelle en pixels du fichier.
• Comparez sizes avec la largeur CSS à chaque taille de fenêtre.
• Utilisez des fichiers de composition identique pour le changement de résolution et les recadrages séparés avec picture.
• Conservez un alt significatif sur le img à l'intérieur de picture.

Pour les règles de sélection détaillées, consultez le guide d’images adaptatives MDN et la spécification des images HTML WHATWG.