L'attribut srcset

Si votre navigateur ne supporte pas srcset, cette page ne vas pas être très passionnante.

Test de densité

<img src="images/logo-nope.png"
     srcset="images/logo-big.png 1x,
          images/logo-hd.png 2x"
     width="1824" height="499" alt="">

Test sans critère correspondant (pour le moment)

<img src="images/logo-nope.png"
     srcset="images/logo-hd.png 10x"
     width="1824" height="499" alt="">

Test de viewport

<img src="images/logo-nope.png"
     srcset="images/logo-320.png 320w,
          images/logo-big.png 1920w"
     width="1824" height="499" alt="">

Test multi-validation des critères

<img src="images/logo-nope.png"
     srcset="images/logo-hd.png 2x,
          images/logo-big.png 1x,
          images/logo-320.png 1x"
     width="1824" height="499" alt="">

L'image ci-dessus doit afficher le logo d'Alsacréations si l'attribut srcset est pris en charge par votre navigateur. Si ce n'est pas le cas vous aurez le droit à un beau "nope".

Page de démonstration de l'article Responsive Images – L'arrivée de srcset