Images réactives

Les images réactives sont une technique d’intégration d’images dans une page Web ou une application qui utilise l’élément picture pour spécifier plusieurs sources d’images, chacune ayant ses propres propriétés CSS. Le navigateur choisit ensuite l’image la plus appropriée en fonction des propriétés CSS de l’élément picture.

Le choix de l’image est basé sur les propriétés CSS de l’élément picture.

Les images réactives sont une bonne solution pour les sites Web qui doivent offrir plus de flexibilité et de contrôle sur l’affichage des images. Elles sont plus complexes à mettre en oeuvre que les images responsives.

Intégration en HTML

<picture>
  <source srcset="image-small.jpg 100w, image-medium.jpg 200w, image-large.jpg 300w" media="(max-width: 400px)">
  <source srcset="image-medium.jpg 200w, image-large.jpg 300w" media="(max-width: 600px)">
  <source srcset="image-large.jpg 300w" media="(max-width: 800px)">
  <img src="image-medium.jpg" alt="Image">
</picture>

Intégration en CSS

picture {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

img {
  object-fit: cover;
  object-position: center;
}