Les largeurs d'image réactives aident le navigateur à choisir une taille de fichier, mais parfois la composition elle-même doit changer. L'élément d'image peut offrir un recadrage portrait sur un écran étroit et un recadrage large sur un écran plus grand.
<picture>
<source media="(max-width: 40rem)" srcset="portrait-crop.webp" type="image/webp">
<source srcset="wide-crop.webp" type="image/webp">
<img src="wide-crop.jpg" alt="A gardener pruning a young tree" width="1200" height="800">
</picture>Gardez la solution de secours complète
- L'élément img porte le texte alternatif et reste la solution de secours si aucune source ne correspond.
- Triez les sources de la condition la plus spécifique à l’option générale.
- Utilisez une largeur et une hauteur qui correspondent à l’actif de secours et évitez les changements de disposition inattendus.
Choisir des cultures qui préservent le sens
La direction artistique va bien au-delà du zoom. Conservez le sujet et le contexte qui comptent dans chaque culture et vérifiez que le texte alternatif décrit toujours la signification partagée.
Utilisez srcset et size lorsque la même composition peut simplement être livrée à différentes résolutions ; utilisez l’image lorsque la composition visuelle change.