Défi de la semaine

Ajouter des images responsive
à une page web

Nous allons utiliser deux nouveaux attributs : srcset et sizes sizes (en plus de alt et de src), afin de fournir plusieurs sources d'images et suffisamment d'indications pour que le navigateur puisse choisir celle qui sera la plus adapté.

srcset et sizes contiennent chacun des listes dont les éléments sont séparés par des virgules.

<img src="chalet.jpg"
    alt="Un chalet en bois dans les Alpes"
    srcset="
        chalet-256.jpg 256w,
        chalet-512.jpg 512w,
        chalet-1024.jpg 1024w"
    sizes="
        (max-width: 500px) 100vw,
        (max-width: 900px) 40vw,
        400px">
                    

Pour srcset : entre chaque virgule, on écrira un élément composé :

  • d'un nom de fichier d'image (chalet-256.jpg)
  • d'un espace
  • de la largeur inhérente à l'image, exprimées en pixels (256w)

Pour sizes : entre chaque virgule, on écrira un élément composé :

  • d'une condition sur le média ((max-width:500px))
  • d'un espace
  • de la largeur de la zone à remplir par l'image quand la condition sur le média est vérifiée (100vw)

Comment ça marche?

L'agent utilisateur va calculer la densité de pixel réelle de chaque image à partir du descripteur w spécifié et des tailles de rendus spécifiées dans l'attribut sizes. Il peut ensuite choisir n'importe quelle ressource en fonction de la densité de pixels de l'écran de l'utilisateur, de son niveau de zoom, ou peut-être d'autres facteurs comme les conditions de réseau de l'utilisateur.