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
etsrcset
doivent avoir le même format. - Définissez les attributs
width
etheight
pour qu'ils correspondent aux dimensions de l'image1x
. - L'attribut
src
doit faire référence à l'image1x
.
Descripteurs de largeur
Pour créer des images responsives qui utilisent des descripteurs de largeur:
- Toutes les images listées dans
src
etsrcset
doivent avoir le même format. - Les attributs
width
etheight
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
etheight
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 danssrcset
ont des dimensions variables. Ce comportement n'est peut-être pas ce que vous attendez. Ajoutezwidth: 100%; height: auto;
ouwidth: 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
etheight
pour toutes les balises<source>
. Les valeurs appropriées pour ces attributs dépendent de la manière dont la balise<source>
utilisesrcset
. - 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
etheight
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>