La balise HTML `picture`

Découvrez les bases du travail avec les images et le HTMLpicturetag, et comment les rendre réactifs

HTML nous donne lepicturetag, qui fait un travail très similaire desrcsetattribut d'unimgtag, et les différences sont très subtiles.

Tu utilisespicturequand au lieu de simplement servir une version plus petite d'un fichier, vous voulez complètement le changer. Ou servir un format d'image différent.

Le meilleur cas d'utilisation que j'ai trouvé est celui de la diffusion d'une image WebP, un format qui n'est pas encore largement pris en charge. Dans lepicturetag vous spécifiez une liste d'images, et elles seront utilisées dans l'ordre, donc dans l'exemple suivant, les navigateurs qui prennent en charge WebP utiliseront la première image, et se replieront sur JPG si ce n'est pas le cas:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

LesourceLa balise définit un (ou plusieurs) formats pour les images. Leimgest la balise de secours au cas où le navigateur est très ancien et ne prend pas en charge lepictureétiqueter.

Dans lesourceétiquette à l'intérieurpicturevous pouvez ajouter unmediaattribut pour définir les requêtes multimédias.

L'exemple qui suit fonctionne comme l'exemple ci-dessus avecsrcset:

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="dog-1000.png"	sizes="800px">
  <source media="(min-width: 1400w)" srcset="dog-1400.png"	sizes="800px">
  <img src="dog.png" alt="A dog image">
</picture>

Mais ce n'est pas son cas d'utilisation, car comme vous pouvez le voir, c'est beaucoup plus verbeux.

Lepicturela balise est récente mais l'est maintenantprise en chargepar tous les principaux navigateurs sauf Opera Mini et IE (toutes les versions).

Téléchargez mon gratuitManuel HTML


Plus de tutoriels html: