[Article] One Size Fits Some - Guide des solutions d'images adaptatives en Responsive Web Design

Bonjour à tous,

SylvainPV nous propose une traduction d'un article de Kado Damball, un développeur JavaScript intéressé par les données et la visualisation de données.

:fleche: One Size Fits Some - Guide des solutions d'images adaptatives en Responsive Web Design

Citation:

---

Alors que les mobiles et tablettes s'approchent de leur but final de domination du monde, le design web et la technologie s'engagent dans une course pour s'adapter au nombre toujours croissant de tailles d'écran à gérer. Cependant, élaborer des outils pour répondre aux défis engendrés par ce phénomène amène tout un nouveau lot de problèmes, dont l'un des derniers buzzwords à la mode, le « web responsive ». C'est le défi de faire fonctionner le web sur la majorité, si ce n'est la totalité, des appareils sans dégrader l'expérience utilisateur. Au lieu de concevoir du contenu adapté aux ordinateurs de bureau et ordinateurs portables, l'information doit être disponible sur les téléphones mobiles, les tablettes ou toute autre surface connectée au Web. Cependant, cette évolution responsive web design s'est avérée être difficile et parfois douloureuse.

Bien qu'il puisse être presque trivial d'adapter du contenu textuel, la partie délicate survient lorsque l'on prend en considération du contenu multimédia comme des images responsive, des infographies, des vidéos, et autres médias créés avec uniquement les ordinateurs fixes à l'esprit. Cela n'amène pas seulement la question d'afficher le contenu correctement, mais aussi la manière dont il sera consommé en utilisant différents appareils. Les utilisateurs mobiles sont différents des utilisateurs desktop. Des choses comme les forfaits Data ou la vitesse de traitement doivent également être prises en considération. Google a commencé à mettre en avant les sites « mobile-friendly » dans ses résultats de recherche, en spéculant sur le fait que cela amènerait un gain substantiel dans le rang de la page (Pagerank) de ce type de sites. De précédentes solutions ont résolu ce problème en utilisant des domaines spécifiques aux mobiles (et des redirections) mais cela a augmenté la complexité et est vite passé de mode. (Tous les sites n'ont pas les moyens de prendre cette direction.)

---

:fleche: Tous les meilleurs cours et tutoriels pour apprendre Javascript
:fleche: Tous les meilleurs cours et tutoriels pour apprendre la programmation Web

A titre personnel, ma technique préférée est un dérivé de la technique de source shuffling. Dans le script de build (actuellement je travaille avec gulp), je renomme les attributs src des balises <img> en data-originalsrc et je remplace l'attribut src par une représentation base64 de l'image diminuée en taille par ImageMagick. Je me suis basé sur un fork de ces plugins :
https://www.npmjs.com/package/gulp-inline-image-html
https://github.com/scalableminds/gulp-image-resize

J'utilisais déjà le remplacement en base64 inline pour les petits pictogrammes dans les feuilles de style, avec des plugins comme celui-ci:
https://www.npmjs.com/package/gulp-base64-inline

Le tout est ainsi minifié et optimisé en nombre de requêtes comme en taille pour un usage mobile. Ensuite, pour les images de plus haute résolution, il suffit d'un petit script qui vérifie si l'utilisateur a une taille d'écran suffisante pour justifier le passage en haute définition, puis récupère les éléments img[data-originalsrc] et vient charger les versions en qualité supérieure, pour les remplacer de manière totalement transparente. Il est aussi possible de coupler ça à la position de la scrollbar ou au survol à la souris pour faire du lazy loading.

Cette solution impose un outillage assez conséquent et donne des fichiers relativement peu lisibles en sortie de build, mais elle s'avère très performante pour l'utilisateur. Si vous trouvez l'idée intéressante et si j'ai un peu de temps entre deux projets, j'essaierai d'en faire un module NPM qui puisse être utilisé par tous.

edit: j'ai publié un prototype fonctionnel ici : https://github.com/sylvainpolletvillard/pilss