Webkit annonce son support de l’attribut srcset

La problématique se pose depuis maintenant quelques temps concernant l’affichage d’image optimisée pour nos différents terminaux : qu’ils proposent une dimension d’écran plus petite ou une densité de pixels plus grande (HD). Cette problématique est en cours de travaux, et Webkit vient d’annoncer le support d’une des solutions envisagées.

Qu’est-ce que l’attribut srcset

Comme j’aime bien vous tenir informés des choses qui peuvent être bien utiles pour vous, j’avais déjà écrit un article sur les solutions d’images responsives et s’adaptant aux terminaux cibles. Je vous le mentionne donc pour rappel. Il ne traite pas uniquement de srcset, mais traite également des différentes solutions en cours de travaux dans le groupe de travail de ResponsiveImages.org.

Pour résumer, srcset est donc un nouvel attribut de l’élément HTML img proposant une syntaxe particulière permettant de définir les sources d’images en fonction des terminaux ciblés.
Prenons un exemple de code simple :

<img
    src="image-classique.jpg"
    srcset="image-medium.jpg 300w, image-haute-resolution.jpg 2x">

La syntaxe implémentée par Webkit respecte celle proposée par le groupe de travail cité précédemment. La valeur de l’attribut accueil donc plusieurs couples <image critères> séparés par une virgule à chaque nouvelle ressource image proposée. Il est possible de combiner les critères pour une même image, comme suit :

<img
    src="image-small.jpg"
    srcset="image-mid-hd.jpg 300w 2x">

Où 300w et 2x sont deux conditions qui doivent être réunies pour charger l’image « image-mid-hd.jpg« .

Qu’est-ce que ce support va changer

Webkit a annoncé le support de cet attribut le 12 août dernier. C’est une bonne nouvelle pour les intégrateurs soucieux de proposer aux visiteurs des images adaptées à leurs appareils, que ce soit par commodité ou pour l’optimisation des ressources serveur (ou les deux).
La prise en charge par Webkit de cet attribut va permettre de proposer de vraies solutions « HTML » à la problématique des sources multiples d’images sans avoir besoin de passer par des solutions full JavaScript qui sont parfois partielles.

C’était un rapide brief sur la nouvelle solution d’intégration d’images responsives, et j’espère pouvoir vous en faire encore quelques unes avec l’arrivée probable de picture, équivalent de video mais pour les images.