Carnet Wiki

images : adaptatives ou responsives ?

Version 8 — il y a 2 mois — 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à |image_reduire sur les images de la page, adaptive_images ne peux plus rien faire de bien car il se retrouve avec une image basse def comme source (si la maquette a des largeurs d’image en 1200px, adaptive_images a besoin d’images sources en 2400px au moins pour pouvoir servir les écran hautes définition)
-  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

Détail de fonctionnement (patchwork de citations) :
-  on envoie dans le html une image miniature jpg/compressée qu’on floute en CSS pour avoir un visuel le temps du chargement de la vrai image
-  quand on génère la miniature, il y a des arrondis de px et du coup il pourrait y avoir un léger décalage entre le rapport hauteur/largeur de la miniature et celui de la vrai image. Pour éviter cela, on encapsule la miniature en pixels dans un svg aux bonnes dimensions.
rq : La balise img s’affiche avec la miniature en data-url, elle en reprend donc exactement les dimensions, même si on ne la voit pas et qu’on ne voit que la bonne image
-  quand tu right clic il y a un bout de JS qui remplace l’attribut src de l’image et enlève la miniature pour mettre la vrai image affichée. Ceci au cas où tu voulais faire « enregistrer cette image… » ou « ouvrir cette image dans un nouvel onglet » ou tout chose de ce genre, et ne pas te retrouver avec la miniature à la place.

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).