<picture>

La balise <picture> permet d'ajuster le contenu d'une image en fonction des conditions d'affichage de l'utilisateur, comme :

• la taille de l'écran ;
• ou la résolution.

Elle est utilisée pour fournir des images spécifiques pour différents contextes, garantissant ainsi une meilleure performance et adaptabilité.

Elle est généralement combinée avec les balises <source> et <img> pour offrir une flexibilité maximale. 😉

Structure et syntaxe de la balise <picture>

Structure et syntaxe de base

La balise <picture> contient des éléments <source> qui définissent différentes images à charger selon des conditions spécifiques (comme la largeur de l'écran ou la résolution).

Ensuite, l'élément <img> fournit une image de remplacement si aucune des conditions de <source> n'est remplie.

Prenons un petit exemple générique :

<picture>
  <source srcset=[chemin vers l'image pour petit écran] media="(max-width: 600px)">
  <source srcset=[chemin vers l'image pour grand écran] media="(min-width: 601px)">
  <img src=[chemin vers l'image de base] alt="description de l'image">
</picture>

Voici quelques explications :

• <source> : Cette balise est utilisée à l'intérieur de <picture> pour spécifier les différentes images et leurs conditions d'affichage. L'attribut srcset contient l'URL de l'image et l'attribut media permet de définir les conditions CSS (comme la largeur d'écran ou la résolution, comme avec le responsive design) ;
• <img> : L'élément <img> est utilisé comme solution de secours au cas où aucune condition de la balise <source> ne correspondrait. Il contient l'attribut src avec l'URL de l'image par défaut et l'attribut alt pour fournir une description de l'image.

Exemple d'utilisation

Prenons l'exemple d'une image responsive avec différentes tailles d'écran :

<picture>
  <source srcset="images/small.jpg" media="(max-width: 600px)">
  <source srcset="images/medium.jpg" media="(min-width: 601px) and (max-width: 1200px)">
  <source srcset="images/large.jpg" media="(min-width: 1201px)">
  <img src="images/default.jpg" alt="Image responsive avec des tailles différentes">
</picture>

Dans cet exemple :

• Une image small.jpg est utilisée pour les écrans de moins de 600px ;
• Une image medium.jpg est utilisée pour les écrans entre 601px et 1200px ;
• Une image large.jpg est utilisée pour les écrans de plus de 1200px ;
• Si aucun des critères n'est rempli, l'image par défaut default.jpg est affichée.

Attributs

Tous les attributs "classiques" sont utilisables avec la balise <picture> (comme title par exemple pour définir un titre qui s'affichera au survol de l'élément dans une infobulle).

Compatibilité des navigateurs