Utilisation de l'attribut srcset

L'attribut srcset de la balise img permet aux navigateurs de choisir parmi plusieurs sources d'images en fonction de la densité de pixels ou de la largeur de la fenêtre. Il est essentiel que toutes les sources soient visuellement similaires ; utiliser des images complètement différentes n'est pas reocmmandé car le navigateur ne peut pas prédire la meilleure taille pour un rendu optimal.

Voici un exemple fournissant des images adaptées à quatre tailles d'écran différentes :

<img src="image-standard.jpg" alt="Exemple d'image responsive" srcset="image-petite.jpg 480w, image-moyenne.jpg 768w, image-grande.jpg 1024w, image-tres-grande.jpg 1440w">

Lorsque la fenêtre du navigateur est redimensionnée, le navigateur sélectionne automatiquement l'image la plus appropriée. Par exemple, sur un écran avec une résolution de 1920 pixels de large, il privilégiera l'image la plus large.

Combinaison avec l'attribut sizes

L'attribut sizes peut être utilisé conjointement avec srcset pour indiquer au navigateur la taille de l'image relative à la fenêtre, ce qui améliore le choix de la source optimale.

<img src="image-standard.jpg" alt="Exemple d'image responsive" sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px" srcset="image-petite.jpg 480w, image-moyenne.jpg 768w, image-grande.jpg 1024w, image-tres-grande.jpg 1440w">

Dans cet exemple, la valeur de sizes est une chaîne décrivant la taille de l'image. Les requêtes média séparées par des virgules spécifient :

• Si la largeur de la fenêtre est inférieure ou égale à 500px, l'image occupe 100% de la largeur de la fenêtre (100vw).
• Si la largeur est supérieure à 500px mais inférieure ou égale à 900px, l'image occupe 50% de la largeur.
• Sinon, l'image est affichée avec une largeur fixe de 800px.

Remarque : 1vw correspond à 1% de la largeur de la fenêtre, donc 100vw représente la largeur totale de la fenêtre.

L'élément <picture>

L'élément <picture> en HTML5 permet de fournir plusieurs sources d'images avec des cnoditions différentes. Il contient zéro ou plusieurs éléments <source> et un élément <img> obligatoire.

<picture>
  <source media="(min-width: 650px)" srcset="image-large.jpg">
  <source media="(min-width: 1080px)" srcset="image-extra-large.jpg">
  <img src="image-standard.jpg" alt="Image de secours">
</picture>

Le navigateur sélectionne la première source correspondant à la condition média. Si aucune condition n'est remplie, il utilise l'attribut src de l'élément img. Pour une compatibilité maximale, l'élément img doit être placé en dernier dans la structure.