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
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
.
Pour les images responsives qui utilisent des descripteurs de largeur:
- Toutes les images listées dans
src
etsrcset
doivent avoir le même format. - Définissez les attributs
width
etheight
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
etheight
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 danssrcset
ont des dimensions différentes. Ce comportement n'est peut-être pas ce que vous attendez. Ajoutezwidth: 100%; height: auto;
ouwidth: 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
etheight
pour toutes les balises<source>
:les valeurs appropriées pourwidth
etheight
dépendent de la manière dont la balise<source>
utilisesrcset
. (Voir ci-dessus pour plus d'informations sur l'utilisation desrcset
.) - 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
etheight
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>