Images adaptatives

Images adaptatives avec les attributs srcset et sizes / l'élément <picture>

Démo srcset et descripteur x

Le navigateur sélectionne la version HD de l'image si l'écran est HD.
Si le navigateur ne reconnaît pas srcset ou si l'écran n'est pas HD, l'image chargée est celle de src.

Deux papillons posés sur des fleurs.

Démo sizes et descripteur w

sizes indique au navigateur quelle doit être la largeur finale de l'image à l'affichage en fonction de la largeur du viewport (unité vw).

w indique au navigateur la taille de l'image pour qu'il puisse sélectionner celle qu'il considère comme convenant le mieux.

Deux papillons posés sur des fleurs.

Démo picture

La balise picture est une balise qui englobe les différentes sources. En fonction de condition sur la taille du média et de sa définition, le navigateur sélectionne la source appropriée.

Image par défaut pour les navigateurs ne prenant pas en charge picture