Version 4 — Juin 2019 — JLuc
2 plugins permettent l’adaptation des images aux smartphones avec un rendu optimisé , également pou les écrans Retina . :
- adaptive images - [Doc->https://contrib.spip.net/4458] - Auteur : [Cerdic->https://contrib.spip.net/Cerdic]
- [image responsive->https://plugins.spip.net/image_responsive.html] - [Doc->https://23forward.com/Plugin-SPIP-Image-responsive] - Auteur : [Arno*->https://contrib.spip.net/_ARNO_]
adaptive images
- adaptive images permet d’activer automatiquement des images responsives sur 99% des images d’un site, d’un seul coup en une fois.
- Il suffit d’installer et activer le plugin pour qu’il prenne immédiatement en charge toutes les images du site ( ou 99 %)
- une des contraintes est de ne repose pas reposer sur du JS.
- apporte un effet de progressive loading obtenu par une miniature basse définition embed dans la page
- son approche technique n’est pas à jour des standards (ce serait qui seraient img+srcset)
- ça casse parfois quelques sites avec des libs particulières JS ou positionnement css (slick par exemple) (car il y a une couche de fausse image qui se change en vraie image)
- les quelques fois ou il fait péter le contenu, ça se règle généralement en une ou deux lignes de css,
- paramétrage globalement par un formulaire de config
image responsive
- Génére un code HTML moderne (et supporté par de plus en plus de navigateurs)
- Nécessite de changer les squelettes pour ajouter les appels de filtre < code>[(#LOGO_ARTICLE_NORMAL|image_responsive )]
- Repose sur du JS .
et styler les containers :
[<div class="logo">(#LOGO_ARTICLE_NORMAL|image_responsive)</div>]</code >
- la modification des insertions <code><img>, ce n’est pas géré par le plugin image_responsive, mais par medias_responsive_mod (
Doc), qui gère les modèles et ajoute les <figure> et <figcaption>.
- Ne repose plus sur Javascript. Utilisé de manière poussée, il fonctionne intégralement avec les variantes media, <picture> et les srcset. Par exemple, sur un site récent https://ihedate.org, on peut naviguer dans tout le site avec l’intégralité de l’interface graphique, les variantes de recadrage et le support des écrans haute densité (« Retina »), avec Javascript désactivé
- Et avec, c’est l’aspect le plus intéressant, le preloading des images intégré aux navigateurs, puisque tout est en HTML5 standard de ce côté.
- Du coup, il (peut) propose(r) des recadrage différents (avec le plugin centre_image) en fonction des tailles et orientations d’écran. C’est un peu compliqué, mais intéressant à faire et intégralement en HTML.
- Les grandes images qui structurent les « fonds » de page, c’est géré directement (et sans Javascript) par un autre plugin, « Fonds »
- à partir du moment où l’on utilise medias_responsive_mod, les insertions <img> existantes dans les articles adoptent le nouveau comportement, et assez curieusement généralement sans péter les articles existants (ça me surprends, en fait).
- la limite sur l’absence de Javascript, justement chez moi ce sont les insertions <img>, que je ne fais pas en statique, parce que je considère que je ne connais pas la dimension de la colonne de texte, surtout que media_responsive_mod facilite l’insertion de plusieurs images sur une même ligne de texte (raccourci <ligne> notamment). Mais vu ce que fait Adaptative Image, ça pourrait se faire plus automatiquement.
- Par défaut la différence de compression sur écran Retina a été désactivée : ces écrans sont d’une telle qualité que la plus grande compression se voit trop. Du coup, ça permet, si on choisit correctement les tailles, d’utiliser le même fichier pour le 640pixels et le 320 pixels en 2x ;
- pour éviter de fabriquer trop d’images (surtout qu’avec Fond, on travaille sur des tailles d’images assez immenses, en « plein écran »), je limite les srcset à 1x et 2x. Pas de taille intermédiaire telle que 1,5x et pas de 3x (à surveiller, d’ailleurs, je n’ai pas d’iPhone X sous la main pour voir si ça se voit).