HTML ∆

images ∆

gestion responsive des images :

srcset ∆

URL et description des différentes images à charger.

x : densité de l'écran (2x pour écran rétina par ex.)
w : taille de l'image source (celle du fichier). force l'usage de sizes.

Ne pas utiliser les 2 en même temps. Privilégier généralement le descripteur w.

sizes ∆

Taille(s) de l'image affichée.

On peut utiliser des media queries pour spécifier diverses conditions. À associer donc aux règles CSS de la page.

Il n'est pas autorisé d'employer l'unité % en valeur de sizes (les unités courantes sont vw ou px)
la valeur par défaut de sizes est 100vw
si sizes est présent dans l'élément <img>, alors le descripteur w est obligatoire

<img> ∆

Plus simple et généralement suffisant.

<img srcset="small.jpg 1x, large.jpg 2x"
  src="small.jpg"
  alt="A rad wolf" />

<img srcset="large.jpg  1024w,
    medium.jpg 640w,
    small.jpg  320w"
  sizes="33.3vw"
  src="small.jpg"
  alt="A rad wolf" />

<picture> ∆

Permet d'utiliser différents srcset en fonction de media queries.

<picture>
  <source media="(min-width: 36em)"
    srcset="large.jpg 1024w,
    medium.jpg 640w,
    small.jpg 320w"
    sizes="33.3vw" />
  <source srcset="cropped-large.jpg 2x,
    cropped-small.jpg 1x" />
  <img src="small.jpg" alt="A rad wolf" />
</picture>

grid ∆

gestion responsive avec autant d'élément horizontaux que nécessiare, retour à la ligne, tout de la même taille.

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));

minmax pour les tailles minimales et maximales de chaque élément.