Super amélioration de mon #plugin pour #SPIP, image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Cette fois, j’introduis la possibilité de fabriquer le code <picture><source> complet pour complètement gérer les images responsive nativement (pour l’instant, dans Chrome).
L’idée, c’est l’introduction d’un quatrième paramètre dans ma fonction, ce qui permet de définir les media queries correspondant à chaque taille d’image.
Par exemple :
[(#LOGO_ARTICLE_NORMAL
|image_responsive{
0/50/100/200,
0,
0,
(max-width:470px)/(max-width:1009px)/
}
)]
La première variable (0/50/100/200) est la liste des tailles d’images autorisées :
– 0 n’est pas une taille d’image, ça signifie simplement qu’au chargement de la page, le <img> se fera sur rien.gif
– ensuite on autorise des images de 50 pixels, 100 pixels, 200 pixels (donc trois tailles).
Si on n’indique rien d’autre, on a le fonctionnement habituel du plugin : une fois la page chargée, un javascript calcule la taille de l’endroit qui contient cette image, et en fonction va appeler l’image à la bonne taille (et éventuellement en haute définition si écran haute déf.)
La seconde variable permettrait de forcer le chargement en « lazy load ». Comme la valeur est zéro (par défaut), ce mode est désactivé. Si on avait forcé la valeur à 1, alors l’image ne serait chargée que si elle visible à l’écran (ou bientôt visible en scrollant). Ça permet, si on a envie, de ne pas charger des images qui seraient bien plus loin en bas de page. Ici, il est important de laisser à zéro, parce qu’on veut un code complet qui se charge dès avant le lancement de la page (voir en préchargement).
La troisième variable est à zéro (par défaut). Si on met à un, alors on indique qu’on veut que les calculs se fassent sur la hauteur du conteneur, et non sur la largeur. Ici il faut laisser à zéro, je n’ai pas encore adapté mon code pour qu’il fonctionne avec les images alignées verticalement.
La quatrième variable est la nouvelle : si on décide de l’utiliser, alors on va permettre au plugin de fabriquer le code complet qui fait fonctionner les images responsive directement en HTML5. C’est alors bien plus rapide à l’affichage, et le pré-chargement fonctionne sur ces images.
Le code généré est le suivant :
<picture style='padding:0;padding-bottom:63.5593220339%' class='conteneur_image_responsive_h'>
<source media='(max-width:470px)'
srcset='
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=50 1x,
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=50&dpr=2 2x
'>
<source media='(max-width:1009px)'
srcset='
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=100 1x,
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=100&dpr=2 2x
'>
<source
srcset='
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=200 1x,
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=200&dpr=2 2x
'>
<img class='image_responsive' alt="" src='https://seenthis.net/rien.gif' data-src='IMG/arton5.jpg' data-l='2832' data-h='1800' data-tailles='[\"50\",\"100\",\"200\"]' />
</picture>
Le principe de cette variable est de contenir autant de
mediaqueries qu’il y a de tailles autorisées dans la première variable, en les séparant par des slash (comme pour les tailles de la première variable). Pour rappel : le 0 ne compte pas comme une taille autorisée.
Ici, on avait les tailles autorisées : 0/50/100/200. On a donc trois tailles autorisées. Dans les medias queries, il nous faut donc définir trois valeurs correspondant à ces tailles d’images autorisées :
(max-width:470px)/(max-width:1009px)/
Ce qui signifie :
– utiliser l’image de largeur 50 dans le cas (max-width:470px)
– utiliser celle de largeur 100 dans le cas (max-width:1009px)
– utiliser l’image de largeur 200 dans les autres cas (par défaut donc).
Noter le slash final, qui permet de voir qu’il y a bien une troisième valeur attendue (valeur vide).
Le plugin fabrique donc les <source> correspondant à ces tailles, en indiquant à chaque fois l’image en définition 1x et l’image en haut définition (2x).
Sur les navigateurs qui comprennent ça (Chrome), ça fonctionne très bien : les images sont chargées bien plus rapidement (puisqu’on n’attend plus le chargement de la page, des JS et des CSS avant de lancer le chargement des images), et le preloader est censé prendre en compte ces informations. (Et si on désactive Javascript : ça fonctionne parfaitement sur ces navigateurs…)
Actuellement caniuse.com donne 40% des visiteurs compatibles (essentiellement : Chrome – donc c’est déjà pas rien) mais la prochaine version de Firefox va l’avoir, et vu que c’est Chrome c’est webkit, je ne vois pas pourquoi Safari traînerait encore longtemps. De toute façon, c’est un enrichissement progressif : si le navigateur ne pige pas, le plugin fonctionnera comme auparavant uniquement en Javascript. (Dommage quand même que ça ne fonctionne pas sur Safari mobile, quand même.)
