Un nouveau #plugin pour #SPIP, destiné à gérer des images en #responsive : Image Responsive
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Le plugin est actuellement installé sur Orient XXI :
►http://orientxxi.info
Pour se faire une idée des problématiques :
▻http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution
Aucune des solutions évoquées ne me plaît, et je me suis dit qu’on a déjà dans SPIP ce qu’il faut pour s’en sortir, du coup voici une solution qui me semble intéressante.
Notez que je suis particulièrement intéressé, ici, par des retours et des commentaires. C’est une solution très expérimentale (je l’ai codée aujourd’hui), et comme elle est du coup directement intégrée à SPIP, je pense que c’est une piste très intéressante à développer.
Le problème à résoudre :
– en responsive, selon la taille de l’écran, une image va s’afficher en différentes tailles ; sur la page d’accueil d’Orient XXI, c’est même très important (une même image s’affiche sur 160 pixels de large ou 460 pixels de large selon l’écran) ;
– de plus, sur un écran haute définition, il faudrait afficher des images encore deux fois plus grandes.
Du coup, dès qu’on commence à faire du design responsive, on a tendance à charger des images plus lourdes que ce qu’on va réellement afficher. Et ça commence à peser sur une connexion mobile pourrie.
Noter que c’est un aspect désormais lourdement pénalisé par le calcul du PageSpeed.
Ma solution avec ce plugin :
– on fait passer une image (ou, si je ne me suis pas raté, un texte complet contenant plusieurs images) par le filtre |image_responsive{120}
– cela va modifier le tag <img> :
+ le src va appeler une version réduite de l’image (ici, à 120 pixels de large),
+ l’image d’origine (celle qui est donc dans la version initiale du src) est stockée dans un data-src
+ j’ajoute une classe « image_responsive » à l’image.
Initialement, quand on charge la page, on va charger une version déjà réduite de l’image et, idéalement, on indiquera la taille d’affichage pour smartphone.
Une feuille de style est associée au plugin, qui force l’affichage de toutes les images de classe .image_responsive à 100% de la largeur. Attention, c’est le point vraiment important et un peu contraignant : c’est le conteneur de l’image (par exemple un <span class="logo"><img></span>) qui va déterminer la largeur d’affichage de l’image, parce que de toute façon l’image sera affichée sur 100% de cet espace. (La feuille de style va donc styler .logo éventuellement de manière responsive…)
Une fois la page chargée, un javascript va scanner chaque .images_responsive, récupérer la largeur à laquelle elle est affichée, éventuellement multiplier par la densité de l’écran (2 pour un écran retina), et remplacer l’image par la version de cette nouvelle largeur.
On charge donc une vignette, puis on remplace par une version de l’image à la taille exacte d’affichage.
L’idée c’est de faire du responsive, pas du fluide. Si votre image peut s’afficher en 1000 largeurs différentes, ce plugin va finir par fabriquer 1000 fichiers graphiques différents, ce qui n’est pas forcément génial…
– Assez simplement, là où mettait un [(#LOGO_ARTICLE_NORMAL|image_reduire{320})]
on met maintenant un :
[(#LOGO_ARTICLE_NORMAL|image_responsive{120})]
(en considérant, par exemple, que 120 est la taille d’affichage usuelle de cette vignette sur un smartphone).
Le reste des automatismes du système se charge automatiquement via le #INSERT_HEAD, donc il n’y a rien à faire, si ce n’est vérifier que les CSS sont adaptées pour forcer le dimensionnement du conteneur de l’image plutôt que l’image elle-même.
– Important : si votre site repose sur le .htaccess (URL sans query string), il faut absolument y insérer une ligne supplémentaire. Cela permet de traiter les images derrière des URL de fichiers JPG, ce qui devrait faciliter les mises en cache.
Avec ça, le score PageSpeed de la page d’accueil d’Orient XXI est passée de 76/100 à 94/100. Et l’impression de vitesse sur smartphone est très très nettement améliorée.
