Images responsives et direction artistique

Les images responsives sont souvent implémentées avec l'attribut srcset. L'attribut srcset est une liste de noms de fichiers d'image séparés par une virgule, ainsi que leurs descripteurs de largeur ou de densité.

Pour éviter les décalages de mise en page, définissez les attributs width et height sur les balises <img> et <source> qui utilisent srcset.

Descripteurs de densité

Pour créer des images responsives qui utilisent des descripteurs de densité:

  • Toutes les images répertoriées dans src et srcset doivent avoir le même format.
  • Définissez les attributs width et height pour qu'ils correspondent aux dimensions de l'image 1x.
  • L'attribut src doit faire référence à l'image 1x.

Descripteurs de largeur

Pour créer des images responsives qui utilisent des descripteurs de largeur:

  • Toutes les images listées dans src et srcset doivent avoir le même format.
  • Les attributs width et height doivent correspondre aux dimensions de l'image de remplacement.
  • Ajustez le style de l'image si nécessaire. Sans CSS, si vous définissez width et height sur une image responsive comportant des descripteurs de largeur, l'image s'affiche toujours à cette taille définie. Cela est vrai même lorsque les images listées dans srcset ont des dimensions variables. Ce comportement n'est peut-être pas ce que vous attendez. Ajoutez width: 100%; height: auto; ou width: 100vw; height: auto; à votre style d'image pour obtenir l'apparence visuelle que vous souhaitez.

Éléments d'image

Pour créer des éléments <picture> responsifs, procédez comme suit:

  • Définissez les attributs width et height pour toutes les balises <source>. Les valeurs appropriées pour ces attributs dépendent de la manière dont la balise <source> utilise srcset.
  • Ajustez l'image en appliquant un style au tag <img> correspondant. La balise <source> est un élément vide. Par conséquent, le style n'a aucun effet.
  • Définissez les attributs width et height pour la balise <img>. Ces valeurs doivent correspondre à la taille intrinsèque de l'image de remplacement.

Exemples

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>