Le responsive design est un principe consistant à reformater son design selon que notre site soit consulté sur Smartphone, tablette ou écran (« desktop »). Cependant, les performances d’une connexion Smatphone sont encore loin d’égaler celles de notre bonne vieille box, ce qui amène naturellement à se poser la question suivante : que faire de nos images ?
Sur un site internet, déjà aujourd’hui, on est très prudent sur le poids de nos images, car elles pourraient considérablement ralentir la vitesse d’affichage, et faire fuir le visiteur, lassé. Les connexions actuelles ont une tendance à faire oublier cet aspect, mais les Smartphones nous rappellent à l’ordre : ce fond « pas si lourd » ou cette photo « haute qualité » augmentent considérablement le temps d’affichage. L’arrivée des nouveaux Smartphones HD (Retina chez Apple, XHDPI chez Androïd), qui demandent des images de plus haute qualité, donc plus lourdes, relancent d’autant plus la problématique.
Bien sûr, l’arrivée de la 4G sur nos réseaux pourrait nous amener à penser que cette question ne se pose plus, mais n’oublions pas que la qualité du réseau téléphonique n’est pas la même partout, et que l’utilisateur paye encore à la quantité de données. Que faire alors pour que nos visiteurs par téléphone, de plus en plus nombreux, puissent admirer nos superbes designs ?
Chacun cherche des solutions, mais le responsive design est encore très récent. Plusieurs méthodes sont utilisées : JavaScript, css, formats de compression d’images, vectoriel, ce ne sont pas les terrains qui manquent. Le sujet est terriblement vaste, et il n’existe pas encore de réelle solution fiable et durable. Cependant, il existe quelques outils assez pratiques, et j’en aborderai quelques uns ici. Je ne prétends pas avoir trouvé LES solutions, mais des outils intéressants qui, malgré quelques défauts, pourraient beaucoup servir à mesure de leur évolution.
Jquery : responsive img
Dépendances : PHP, jQuery. Nécessite les droits d’écriture sur les répertoires d’images impactés.
Développé par la société Brolik pour une application à son propre CMS responsive, ce plugin jQuery permet de générer automatiquement des copies redimensionnées d’une image si elles n’existent pas, en fonction de breakpoints prédéfinis. Il remplace ensuite le lien d’image dans le DOM par le nouveau lien vers l’image redimensionnée. Avec une configuration assez simple, on peut même s’éviter le préchargement de l’image initiale.
Avantages :
- Simple à installer.
- Peu de code.
- Configuration rapide par breakpoints.
- Possibilité d’éviter le préchargement de l’image-source.
Inconvénients :
- Ne met pas à jour les images redimensionnées si l’image source change. Il faut les supprimer manuellement.
- La taille des images générées est égale exclusivement aux breakpoints.
PHP : Adaptative images
Dépendances : PHP, JavaScript.
Développé par Matt Wilcox, ce module utilise une fonction JavaScript pour créer un cookie contenant la taille de l’écran. PHP utilise ensuite ce cookie, et à chaque balise img rencontrée, génère si besoin une image redimensionnée à partir de l’image-source, en fonction de breakpoints prédéfinis.
Avantages :
- Utilisation de breakpoints
- S’assure que la date de création des images redimensionnées correspond à celle de l’image-source.
- Aucun préchargement d’une « mauvaise » image, puisque définie dès la conception par PHP.
- Possède une version alternative en CSS plutôt que JavaScript.
Inconvénients :
- Ressenti en développement, la taille de référence est celle de l’écran, pas de la fenêtre.
HTML5 : balise picture et attribut srcset
Dépendances : HTML5
Représentation de l’image responsive par le Responsive Images Community Group
La nouvelle balise picture, et le nouvel attribut srcset pour la balise img, sont au stade de Working Draft au W3C, et peu supportés à l’heure actuelle par les navigateurs. Ils ont été proposés par le Responsive Images Community Group, et pourraient, lorsqu’ils seront assez stables, résoudre nos problèmes d’images responsive. Les détails de leur évolution sont consultables sur la page concernée dans le W3C Community and Business Groups.
Le fonctionnement de picture serait similaire à celui de vidéo et audio, à savoir de pouvoir lister une série de sources, auxquelles seraient adjointes des conditions de taille de fenêtre.
L’attribut srcset se baserait sur un principe similaire en tant qu’attribut de la balise img, dans lequel on pourrait lister différentes sources et conditions, y compris les conditions HD, comme pour Retina.
Avantages :
- Il s’agit d’éléments DOM, le gain en performances s’en trouvera très élevé, ainsi que l’économie de code.
Inconvénients :
- Il va falloir encore patienter pour que ces nouveautés soient utilisables.
Conclusion
Nous sommes encore loin d’avoir de véritables outils fiables, mais la question des images dans les design responsive reste au cœur des préoccupations, dans un web allant de plus en plus vers les écrans portables. Mais petit à petit, différents projets évoluent, et nous pouvons espérer avoir bientôt des technologies fiables pour améliorer notre visibilité sur mobile et tablette.
