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

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Aligner les images
Suivant
Les figures