25-balise-picture.md

layout	title
page	Balise Picture

La balise Picture

Exemple:

<picture>
    <source type="image/webp" srcset="chat_mignon.webp">
    <source type="image/jpeg" srcset="chat_mignon.jpg">
    <img src="chat_mignon.jpg" alt="Un chat particulièrement mignon" loading="lazy">
</picture>

Note: les attributs "alt" et "loading" ne doivent figurer que sur la balise <img>, il n'est pas nécessaire de les dupliquer (voir discussion Stackoverflow).

Avec les images de background

Pour obtenir cette fonctionnalité avec les images de fond chargées en CSS, on peut utiliser la fonction CSS image-set().

Exemple:

.box {
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}

Voir plus d'infos sur MDN.