Tour d'horizon des images Responsive pour le Web

Les builds quotidiens de WebKit supportent maintenant l'attribut srcset défini dans la spécification du W3C pour les éléments images et permet aux développeurs de définir des images haute définition pour les utilisateurs ayant des écrans haute résolution, sans pénaliser les autres. Elle propose également une solution de repli pour les cas des navigateurs ne supportant pas encore cette fonctionnalité :

<img alt="My breakfast"
  src="breakfast.jpeg"
  srcset="breakfast-HD.jpeg 2x, breakfast-phone.jpeg 100w, breakfast-phone-HD.jpeg 100w 2x">

WebKit supportait déjà la propriété CSS -webkit-image-set depuis un moment, qui est très similaire à srcset. Elle permet aux propriétés CSS autorisant une image de fournir une liste d'urls d'images possibles, accompagnée chacune d'un modificateur tel que “2x”. Ce qui permet au navigateur de choisir la meilleure image pour le terminal de l'utilisateur :

body {
  background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );
}

Ce choix de WebKit arrive au moment où la communauté et les développeurs de navigateurs sont toujours partagés sur le meilleur choix en termes d'images Responsive sur le web. Courant septembre, le Responsive Images Community Group (RICG) doit se réunir à Paris pour discuter de la marche à suivre pour les images Responsive. Dans son appel à la réunion, Yoav Weiss du RICG souligne les solutions futures possibles et les pratiques courantes des développeurs :

Depuis quelques années, plusieurs personnes ont travaillé à trouver une solution pour résoudre le problème des images Responsive sur le web, avec un intérêt particulier de la part des développeurs web. Bien que nous ayons maintenant 3 propositions à portée de main (srcset [1], <picture> [2] et client-hints [3]), nous avons eu du mal à obtenir suffisamment d'intérêt de la part des navigateurs pour permettre au marché de décider quelle solution est la plus apte à supporter les différents cas d'utilisation.

Dans le même temps, les développeurs web ont dû se débrouiller avec des polyfills qui souvent empêchent le navigateur de charger l'image tant que le DOM n'est pas chargé (au moins partiellement) et que le javascript de la page n'a pas été exécuté. Celà nuit directement à tout le travail d'optimisation autour du chargement de ressources, réalisé par les ingénieurs travaillant sur les navigateurs depuis des années, pour envoyer les requêtes dès que possible sur le réseau, en fonction de leur priorité. Les développeurs se retrouvent face au dilemme "Devons-nous bloquer le chargement de l'image, ou télécharger des images inutilement et donc ralentir le temps de chargement global tout en alourdissant la facture de l'utilisateur  ?"

Quelques solutions populaires pour gérer ce problème sont :

• Picturefill : Un polyfill qui imite l'élément <picture> proposé
• HiSRC : Un plugin jQuery qui télécharge (ou non), au chargement de la page, une version haute résolution de l'image, si le terminal le supporte
• Adaptive Images : Une solution côté serveur pour servir l'image à la bonne taille et résolution