Carnet Wiki

images : adaptatives ou responsives ?

Version 7 — Juillet 2019 — 78.242.xx.xx

2 plugins permettent l’adaptation des images aux smartphones avec un rendu optimisé, également pou les écrans Retina.

-  adaptive images - Doc - Auteur : Cerdic
-  image responsive - Doc - Auteur : Arno*

adaptive images

-  Il suffit d’installer et activer le plugin pour qu’il prenne immédiatement en charge toutes les images du site (ou 99%). MAIS s’il y a déjà < code>|image_reduire</code > sur les images de la page Et notamment , adaptive_images ne peux plus rien faire de bien car il se retrouve avec une image basse def comme source ( si ça prend la maquette a des largeurs d’image en 1200px , adaptive_images a besoin d’images sources en 2400px au moins pour pouvoir servir main sur les écran hautes définition )
- ne repose pas sur du JS image_reduire .
- ne repose pas sur du JS.
- apporte un effet de progressive loading obtenu par une miniature basse définition embed dans la page
-  son approche technique initiale n’était pas à jour des standards (ce serait img+srcset). Qu’en est il depuis les travaux de juin 2019 ?
-  ç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
-  intègre plusieurs possibilités de prévisualisation : par gradiant ou par svg géométriques

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 [(#LOGO_ARTICLE_NORMAL|image_responsive)] et styler les containers : [<div class="logo">(#LOGO_ARTICLE_NORMAL|image_responsive)</div>]
-  la modification des insertions <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).