Design responsive : Des images multi résolution avec srcset

À l'heure où les sites internet sont visités sur une multitude de supports que ce soit smartphone, tablette ou ordinateur, il est presque impératif de s'adapter lors du développement d'un site notamment en utilisant des images de résolutions différentes suivant le matériel.

Un nouvel attribut commence à faire son apparition dans les balises <img ... /> en HTML, c'est l'attribut srcset.

Comment fonctionne l'attribut srcset

srcset permet de définir plusieurs images qui seront utilisées en fonction de la densité de pixel de l'écran de l'utilisateur. J'entends par là le ratio entre le nombre de pixel physique de l'écran et le nombre de pixel CSS (device pixel ratio ou css pixel ratio).

Sont utilisation est simple, il suffit d'ajouter cet attribut dans une balise d'image html.

Exemple :

<img src="image.jpg" srcset="image-2x.jpg 2x image-4x.jpg 4x" alt="image"/>

Avec ce code, le navigateur choisira en fonction du device pixel ratio une des images définies dans "srcset". Si la densité de pixel est supérieure à 2 et est inférieur à 4, il choisira image-2x.jpg. Si cette densité est supérieure à 4, il utilisera l'image nommée image-4x.jpg.

Il est important de continuer à déclarer une image dans l'attribut src, elle sera utilisée dans le cas ou srcset n'est pas reconnu par le navigateur, ou si aucune de ses images n'est conforme aux contraintes.

À noter qu'il sera/est possible de définir des contraintes liées directement à la largeur de l'écran. Voici un exemple de code :

<img src="image.jpg" srcset="image720.jpg 720w, image1280.jpg 1280w, image-2x.jpg 2x" alt="image"/>

Sachez pour finir que Google a annoncé la prise en charge de cet attribut pour sa prochaine version de Google Chrome 34.