Images responsives : état des lieux

[See it in english]

Cela fait quelques années maintenant que le Responsive Web Design (RWD) a commencé à faire partie des bonnes pratiques du web. Depuis, de gros efforts ont été faits pour trouver une solution au problème des images responsives. Face à un nombre toujours croissant de terminaux, de proportions de pixels, et à la nécessité de gérer la direction artistique dans ces divers contextes, la tâche était énorme. Le Responsive Images Community Group (RICG) a été créé il y a environ trois ans pour chercher des réponses à cet imbroglio, et proposer des réponses à l’organisation des standards du web (W3C). De nombreuses discussions et tentatives s’en sont suivies. Ekino a suivi cette évolution de près, et était présent à la réunion sur les images responsives de septembre 2013, qui a réussi à regrouper les représentants de tous les navigateurs internet autour d’une table pour échanger sur le sujet.

Nous avons le plaisir d’annoncer que le problème est désormais résolu, et que des solutions ont été trouvées pour gérer les images responsives. Et ces solutions peuvent être utilisées dès aujourd’hui !

La majorité des faiseurs de navigateur internet se sont mis d’accord sur les spécifications de la nouvelle version de l’élément “picture”, ainsi que des attributs “srcset” et “sizes” de l’élément “img”. La gestion des nouveaux types d’images, tel WebP, est également au menu.

Une des plus grosses améliorations survenue lors des récents développements est qu’au lieu demander aux développeurs de gérer tous les cas, ils fournissent désormais toutes les informations requises au navigateur, et c’est lui qui est chargé de choisir la bonne image. Ceci permet une flexibilité accrue. Par exemple, le navigateur peut décider de télécharger une image de plus basse qualité en cas de mauvaise bande passante, ou selon les préférences de l’utilisateur.

Du coté implémentation native, cette fonctionnalité est désormais disponible dans Chrome Canary 37, la version de test de Chrome, et devrait sortir en version public dans Chrome 38 en septembre 2014. Les gens de Firefox travaillent aussi dessus, et elle est arrivée dans leur version de test de Firefox 32. Elle devrait être disponible dans Firefox 33 en octobre prochain. Le travail sur Webkit est officiellement en cours aussi. Opera devrait suivre rapidement (on attend la fonctionnalité dans Opera 25), et même Internet Explorer a officiellement déclaré la fonctionnalité “en considération”.

Pour l’instant, l’implémentation dans Chrome marche très bien au chargement de page, et devrait marcher lors d’un redimensionnement dans les semaines à venir.

Mieux encore, une nouvelle version du “polyfill” PictureFill a été créée et peut rendre la fonctionnalité disponible sur presque tous les navigateurs. Seul IE8 ne peut pas la gérer, puisqu’elle est basée sur les media queries. Elle a aussi un support seulement partiel sur Android 2.3, qui ne peut gérer que les deux nouveaux attributs de l’élément “img” mais pas l’élément “picture”. Cela dit, il faut noter que la plupart des cas d’usages peuvent être couverts sans utiliser “picture”.

Le polyfill prend le relais dans le cas où la fonctionnalité n’est pas supportée de manière native, donc il peut être utilisé sans risque de conflit avec l’implémentation native. Le seul point noir à prendre en compte avant de l’utiliser est qu’une requête http pour l’image de fallback devra être faite avant que le JavaScript ne se mette en place et n’appelle la bonne. Mais nous utilisons tous le principe du “mobile first” avec une image très légère en guise de fallback, n’est-ce pas ? Quoiqu’il en soit, nous avons désormais un joli nouveau jouet avec lequel nous amuser, et nos sites responsives ne peuvent que s’en porter mieux. Votre prochain site web sera-t-il le premier à offrir des images réellement responsives à vos utilisateurs ?

Liens

• Notre démo des attributs srcset et sizes
• Notre démo de l’élément picture
• Télécharger la démo
• Les spécifications officielles
• Le polyfill

Crédit photo: Matthieu Larcher, photo prise à la réunion sur les images responsives de septembre 2013 hébergée par Mozilla.