Microsoft ne cesse de se rapprocher des nouveaux standards du web, et après le support WebGL, Web Audio, Dolby, c’est maintenant au tour de l’attribut srcset d’être supporté.

Avant l’arrivée de srcset, un développeur souhaitant effectuer une page responsive était obligé de choisir des images de haute qualité pour pouvoir supporter les appareils de type HD/Retina. Le problème est que un appareil mobile non HD chargeait donc une image HD pour rien ce qui non seulement consommait de la mémoire, mais aussi de la bande passante.

L’attribute srcset vient régler ce problème en permettant au développeur de spécifier plusieurs sources pour une même image, en fonction de la taille de l’écran. Le navigateur chargera donc la bonne image en fonction de l’écran de l’appareil et il n’y aura donc plus de gâchis de bande passante.

Voici un exemple d’utilisation de srcset:

<img src="fallback.jpg" srcset="lowres.jpg 1x, mediumres.jpg 1.5x, highres.jpg 2x" />

Pour plus d’informations, rendez-vous sur le blog de Microsoft Edge.

Source: Microsoft Edge Dev Blog