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>.

couv_OW5BOO.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
Aligner les images
Suivant
Les figures