Images responsives et direction artistique

Les images responsives sont souvent implémentées à l'aide de l'attribut srcset. L'attribut srcset est une liste de noms de fichiers d'images séparés par une virgule, ainsi que de 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.

Pour les images responsives qui utilisent des descripteurs de densité:

  • Toutes les images listé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.

Pour les images responsives qui utilisent des descripteurs de largeur:

  • Toutes les images listé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 de remplacement.
  • Ajustez le style de l'image selon vos besoins:en l'absence de styles CSS, si vous définissez width et height sur une image responsive qui utilise des descripteurs de largeur, l'image s'affiche toujours à la même taille, même si les images répertoriées dans srcset ont des dimensions différentes. Ce comportement n'est peut-être pas ce que vous attendez. Ajoutez width: 100%; height: auto; ou width: 100vw; height: auto; au style de votre image pour obtenir l'apparence visuelle que vous souhaitez.

Pour les balises <picture> :

  • Définissez les attributs width et height pour toutes les balises <source>:les valeurs appropriées pour width et height dépendent de la manière dont la balise <source> utilise srcset. (Voir ci-dessus pour plus d'informations sur l'utilisation de srcset.)
  • Ajuster le style de l'image:si vous devez ajuster le style d'une image, n'oubliez pas que l'ajout d'un style à une balise <source> n'aura aucun effet. Une balise <source> est un élément vide. À la place, vous devez appliquer un style au tag <img> correspondant.
  • Définissez les attributs width et height sur la balise <img>:ces valeurs doivent correspondre à la taille intrinsèque de l'image de remplacement.

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>