Les sources des images IMAGES:Sources
Dans le design de vos sites web, vous pouvez souhaiter prendre en considération les types d’écrans de vos visiteurs. Ceux-ci peuvent avoir des écrans standards ou des écrans à haute définition. Pour ces derniers il faut prévoir des images à haute définition aussi. Pour mettre en place cette dualité, vous devez utiliser les éléments <picture>, <source> et <img>.
Voici une structure simple :
<picture>
<source srcset="venise-hd.jpg" type="image/svg+xml">
<img src="venise.jpg" class="img-fluid img-thumbnail"
alt="Venise">
</picture>
Analysons cette structure classique :
-
Tous les éléments sont insérés dans l’élément <picture>.
-
L’image à haute définition est placée dans l’élément <source>.
-
L’image standard est placée dans l’élément classique <img>.