Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans une page web en fonction de l’utilisateur.
Les images adaptatives sont nécessaires pour les sites responsive qui vont adapter leur affichage au périphérique de consultation [1] : sur un site responsive la même page est rendue de manière différente selon la taille de l’écran.
Il y a 4 raisons d’adapter l’image envoyée à l’utilisateur :
- la taille de l’écran (inutile d’envoyer une image de 1000px de large sur un téléphone qui affiche la page en 320px de large) ;
- la résolution de l’écran (écrans de haute densité, capables d’afficher plus de pixels par pouce qu’un écran habituel) ;
- la qualité de la connexion internet (notamment en mobilité) ;
- le contenu éditorial (une image affichée en petit peut devenir illisible et il est alors préférable de la recadrer).
Adapter les images vise donc à améliorer l’expérience utilisateur, en lui délivrant l’image qui convient le mieux à son usage.
HTML5 propose un markup spécifique pour permettre au navigateur de savoir quelle image charger, composé de plusieurs éléments : une balise <picture>
, une balise <source>
et des attributs srcset
et sizes
. [2].
Cependant la génération de ce markup est assez complexe dès lors qu’on veut commencer à gérer tous les cas, et nécessite la génération d’un certain nombre de variantes d’images.
De plus le support n’est pas universel, les plus anciens navigateurs ne prennent pas en charge ce markup et doivent être gérés.
A cet effet le plugin offre aussi historiquement l’implémentation d’une technique alternative, la technique des 3 couches basée sur HTML/CSS/JS, qui peut être utilisée pour supporter les navigateurs plus anciens supportant seulement les media-queries [3].
[4]
Ce plugin a donc pour objet d’automatiser la prise en charge des images adaptives, via l’une ou l’autre des 2 techniques disponibles. Le choix de la technique utilisé est normalement transparent, les 2 markups générés ressemblant beaucoup l’un à l’autre.
Si les plus grandes images dont on dispose ont des dimensions de l’ordre de 640px, il sera aussi rapide et bien plus simple de servir ces images pour tous les utilisateurs sans recourir à ce plugin.
Mise en place
Il suffit d’installer et activer le plugin pour qu’il prenne immédiatement en charge toutes les images du site.
Par défaut le plugin va intercepter toutes les pages HTML, et agir sur toutes les images plus larges que 320px et les adapter à l’utilisateur :
- adaptation à la largeur de l’écran, en supposant une largeur maximale affichée de 640px dans tous les cas ;
- adaptation à la résolution de l’écran en envoyant une image 1.5x ou 2x ;
- génération d’un aperçu de basse qualité visible pendant le chargement de l’image de haute qualité
- adaptation à la qualité de la connexion, et pas d’image 1.5x ou 2x si mauvaise connexion [5] ;
- adaptation du contenu : possibilité de fournir une version recadrée de l’image pour les petits écrans mobiles.
Limitations
Avec la technique des 3 couches :
- Le plugin ne fournit pas d’image adaptée dans Internet Explorer<10.
- Les périphériques Androïd 2.x sans JavaScript risquent de charger plusieurs versions de la même image. Mais ce devrait être un cas très rare.
Avec la technique HTML5 srcset + <source>
:
- Le plugin nécessite les versions récentes de Edge, Chrome, Safari ou Firefox pour utiliser le markup HTML5
- La qualité de connexion n’est pas prise en compte avec cette technique, et les mobiles peuvent se retrouver à charger des images HD à cause de leur qualité d’écran malgré un faible débit
Optimisation
Certains squelettes, notamment squelettes-dist/ fourni avec SPIP, appliquent automatiquement un filtre |image_reduire
sur tous les contenus éditoriaux, comme par exemple :
[(#TEXTE|image_reduire{500})]
Dans ce cas le plugin ne pourra pas bien faire son travail, car la taille maximale dont il dispose pour l’image est de 500px. Il faut supprimer ces filtres, et essayer de toujours conserver la taille d’image maximale dans le code source.
Pour limiter la taille affichée, il faut utiliser le filtre |adaptive_images
fourni par le plugin, qui permettra la mise en cache des images adaptées (ce qui est plus écologique et permettra à votre site d’être plus rapide) :
[(#TEXTE|adaptive_images{640})]
L’argument fourni est la largeur maximale dans laquelle l’image est affichée tous écrans confondus. Ici on met 640 px comme largeur maximale d’affichage, ce qui veut dire que le plugin sera susceptible d’envoyer une image en 1280px de large pour les écrans Retina (si l’image d’origine est assez grande).
Si vous ne mettez pas d’argument c’est la valeur par défaut qui est utilisée, qui est personnalisable comme indiqué ci-dessous.
Personnalisation
Il est possible de personnaliser un certain nombre de réglages du plugin via la page de configuration du plugin, si les réglages par défauts, aussi génériques que possibles, ne vous conviennent pas.
En pratique il y a très peu de choses à personnaliser : si vous avez besoin d’une largeur maximale supérieure à 640px, le mieux est d’appliquer le filtre |adaptive_images
avec la bonne valeur, comme indiqué ci-dessus.
Une fois l’image adaptée à la bonne largeur, elle ne sera plus modifiée ensuite.
Markup généré
Vous pouvez choisir entre la méthode des 3 couches et la méthode HTML5, donc
Couleur de fond
Si jamais votre site utilise un fond de couleur foncé (noir ou autre), il peut alors être utile de personnaliser cette couleur utilisée quand l’aperçu au format JPG est produit à partir d’une image PNG ou GIF qui utilise la transparence.
Largeur maximale affichée pour les images adaptées
Cette valeur permet de définir la largeur maximale affichée des images. Il faut éventuellement l’adapter à votre site, en fonction de la largeur maximale de la zone de contenu dans les différentes tailles d’écran.
Largeur maximale de la version mobile
Permet de définir la largeur maximale pour laquelle la version mobile —si elle existe— est utilisée. Par défaut c’est 320px : quand l’image est affichée en 320px ou moins de large, on utilise la version recadrée pour les mobiles, sinon la version complète de l’image. On recommande plutôt d’utiliser 480px
Largeur minimale pour adapter
Permet de définir la largeur minimale des images qui seront adaptées à l’utilisateur. Les images plus petites seront laissées telles quelles et identiques pour tout le monde. On recommande d’utiliser 480px
Poids minimal pour adapter
Permet de définir le poids minimal des images qui seront adaptées à l’utilisateur. Les images plus légères seront laissées telles quelles et identiques pour tout le monde, car générer une image adaptée augmenterait le poids total téléchargé.
Breakpoints
Permet de définir les breakpoints pour lesquels on produit des variantes d’image. Indiquez une liste de largeur en px, séparés par une virgule, dans l’ordre croissant. Les valeurs par défaut sont calées sur des multiples de 160px.
Production des images à la demande
Par défaut, le plugin fabrique toutes les variantes d’images au calcul de la page. Si vous avez beaucoup de grosses images dans vos pages, cela peut provoquer des timeout et vous obliger à recharger la page plusieurs fois.
Cette option permet de fabriquer chaque variante d’image adaptée lorsqu’elle est demandée pour la première fois par un utilisateur.
Pour l’utiliser il faut ajouter les lignes suivantes dans votre fichier .htaccess, après la partie qui vérifie l’existence du fichier, c’est-à-dire juste avant la section # URLs "propres", "propres2", "libres", "arbo"
[6] :
###
# Adaptive Images
RewriteRule \badapt-img/(\d+/\d\dx/.*)$ spip.php?action=adapt_img&arg=$1 [QSA,L]
# Fin des Adaptive Images
###
Compression JPG
Vous pouvez définir la qualité de la compression des images JPG utilisées pour les différents affichages : Image 1x, image 1.5x, image 2x.
Génération de l’image d’aperçu
Le plugin propose plusieurs méthodes pour générer un aperçu visible pendant que l’image de bonne qualité se charge (cf https://jmperezperez.com/svg-placeholders/ et https://seenthis.net/messages/645575 sur les méthodes proposées) :
- Fond dégradé horizontal+vertical : c’est le plus léger, composé de 2 gradients croisés et superposés, donne juste une vague idée de la couleur de l’image
- Image basse définition floutée : c’est une méthode assez courante. Le plugin génère une toute petite image, très légère, et l’affiche en grand format en la floutant. Vous pouvez régler la largeur de la vignette générée (128px par défaut) et la qualité utilisée pour la compression JPG (40 par défaut) [7]. Attention, l’image générée est embarquée dans la page, il faut donc qu’elle reste très légère.
- Tracé d’un contour issu de l’image : le plugin va créer un tracé vectoriel à partir de l’image, pour avoir une forme monochrome la représentant
- Géométrization de l’image : calcul d’une approximation géometrique de basse qualité à l’aide de quelques dizaines de triangles[[utilise la librairie PHP https://github.com/Cerdic/geometrize-php/]
Pour faire votre choix, ou ajuster les réglages, vous cocher l’option Activer le debug (les aperçus apparaissent au survol de l’image). Dans ce cas, au survol de la souris sur une image adaptée, l’image de bonne qualité disparait et l’aperçu de basse qualité est visible. C’est un outil de développement, pensez à décocher quand vous avez fini !
Variante d’image pour petits écrans
Le plugin permet également de joindre à chaque image une variante pour mobiles. Pour cela il suffit de modifier l’image dans l’espace privé de SPIP, et de joindre la version recadrée dans le cartouche du bas intitulé Version mobile
:
À noter que pour pouvoir fournir une version haute résolution aux écrans de type Retina, il convient de fournir une image dont la largeur minimale est au moins 2x la valeur de la configuration pour la largeur maximum de la version mobile. L’interface indique la largeur minimum attendue, ici 640px donc.
Si la variante que vous ajoutez ne respecte pas ces proportions, un message d’avertissement vous le signalera accompagné d’une suggestion de dimensions :
Si vous utilisez la méthode HTML5, vous pouvez conserver une version mobile avec des proportions différentes.
Si vous utilisez la méthode des 3 couches, le rendu risque d’être déformé, et il est fortement conseillé que la variante pour petits écrans aie les mêmes proportions que l’image principale.
Si vous voulez spécifier une variante mobile d’une image insérée par votre squelette ou autrement que par le contenu éditorial de SPIP, il suffit de préciser le chemin de l’image dans un attribut data-src-mobile
:
<img src="..." data-src-mobile="...." alt="..." />
Le plugin repèrera automatiquement l’attribut et utilisera cette variante pour les mobiles.
Classes spécifiques au plugin
Le plugin utilise quelques classes dont vous pouvez avoir besoin dans vos feuilles CSS.
Les images adaptées ont une classe adapt-img
et sont encapsulées dans un wrapper avec la classe adapt-img-wrapper
. Si par exemple vous voulez mettre des coins arrondis sur vos images, il faudra aussi les appliquer sur .adapt-img-wrapper
:
img,.adapt-img-wrapper { border-radius:5px; }
Les images fournies à Internet Explorer < 10 ont aussi une classe spécifique adapt-img-ie
.
Il est possible de demander de ne pas appliquer Adaptive Images sur certaines images en leur ajoutant la class no-adapt-img
.
Utilisation avancée dans les squelettes
Une image plus grande sur la home
Certaines pages peuvent contenir une image plus large que dans le reste du site. Par exemple votre contenu ne dépasse jamais 640px de large, mais sur la page d’accueil du site vous avez une image en 960px de large sur les grands écrans.
Pour traiter ce cas il suffit de lui appliquer le filtre |adaptive_images
avec la largeur adaptée :
[(#FICHIER|balise_img|adaptive_images{960})]
Des breakpoints spécifiques
De la même façon, vous pouvez avoir besoin de fixer des breakpoints spécifiques pour une image données. Cela se fait toujours avec l’argument du filtre en lui indiquant les différents breakpoints séparés par un / :
[(#FICHIER|balise_img|adaptive_images{480/960/1440})]
Dans ce cas la dernière valeur de la série de breakpoints correspond à la taille maximale
Une image qui n’occupe pas toujours la largeur maximale
Si vous utilisez la méthode HTML5, vous pouvez préciser le comportement de votre image en fonction de la taille de l’écran via l’attribut sizes
Par défaut le plugin suppose que votre image occupe la pleine largeur de votre page, et renseigne un attribut sizes
.
Dans les autres cas vous pouvez ajuster ce comportement, via le second argument du filtre |adaptive_images
[(#FICHIER|balise_img|adaptive_images{1024,'(max-width: 768px) 100vw, (max-width: 900px) 50vw, 33vw'})]
Ici on indique que
- jusqu’à 768px de largeur d’écran, l’image occupe toute la largeur de l’écran
- puis jusqu’à 900px de largeur d’écran, l’image occupe 50% de la largeur de l’écran
- puis par défaut, au delà, l’image occupe 33% de la largeur de l’écran
Dans ce cas le plugin ajoutera une règle implicite pour dire que dans tous les cas l’image fait 1024px maximum (et c’est donc pour les écrans de 1024/0.33 = 3103px de large).
Pour alléger l’écriture, il est aussi possible de fournir un tableau en guise d’information pour sizes
. L’écriture suivante est équivalente :
[(#FICHIER|balise_img|adaptive_images{1024,#ARRAY{768px,100vw,900px,50vw,*,33vw}})]
Ne pas adapter certaines images
Pour empêcher le plugin d’adapter certaines images que vous voulez conserver intactes, il suffit de leur ajouter une classe no-adapt-img
.
Utilisation d’une image adaptée en background
Parfois on peut avoir besoin d’une image adaptée en background : c’est de la décoration, mais on veut que la qualité de l’image s’adapte à la taille de l’écran.
Il est possible pour cela d’utiliser le filtre |adaptive_images_background
, qui prend en arguments optionnels : une largeur maxi (idem ci-dessus), un attribut de class
et une couleur par défaut
[(#FICHIER|balise_img|adaptive_images_background{1024,super-bg,#f4f4f4})]
Le code généré est plus léger, ne comporte qu’un <span>
, avec la classe adapt-img-background
.
A noter que le code généré est le même quelle que soit la méthode choisie dans la configuration du plugin.
Les autres réglages (moins utiles)
Bon, si vous aimez vraiment bidouiller, vous pouvez jouer avec les quelques autres réglages via le fichier mes_options.php.
_ADAPTIVE_IMAGES_NOJS_PNGGIF_PROGRESSIVE_RENDERING
permet de conserver ou non le rendu progressif des images PNG et GIF quand JavaScript est désactivé. Si le rendu progressif est conservé sans JavaScript, les images avec transparence pourront être dégradées. Par défaut on ne le conserve donc pas.
define('_ADAPTIVE_IMAGES_NOJS_PNGGIF_PROGRESSIVE_RENDERING',false);
_ADAPTIVE_IMAGES_DOMAIN
permet de définir un nom de domaine qui sera utilisé pour les URLs des images adaptatives. Cela peut-être utile si vous voulez placer vos images sur un domaine statique sans cookie par exemple.
define('_ADAPTIVE_IMAGES_DOMAIN','http://example.org/');
Discussions par date d’activité
63 discussions
Les images sur un petit écran ont une opacitée si faible que je ne les voit à peine. Que faire ?
Idem pour moi.
Est-ce qu’il est possible d’appliquer le filtre adaptative_images après un filtre de recadrage et/ou de redimensionnement ?
Est-il possible de fixer une hauteur spécifique dans des blocs précis car seule la largeur est définie ?
Je serai intéressé aussi par une réponse sur la contrainte de hauteur et sur les filtres préalables.
Merci
Répondre à ce message
Bonjour,
J’utilise le plugin sur plusieurs de mes sites.
J’ai configuré mes squelettes pour insérer automatiquement un alt via le filtre |inserer_attributalt,#TITRE
Je me rends compte que sur l’espace public le alt est effectivement renseigné pour mes images est effectivement renseigné dans la partie commentée « [if IE]>... », mais est vide pour la balise img non commentée...
Est-ce une erreur de manip de ma part ?
Merci d’avance
Sandrine
Il faut appliquer le filtre
|inserer_attribut{alt,#TITRE}
avant le filtre|adaptive_images
car ce dernier génère plein de code à partir de la balise<img />
Répondre à ce message
Salut,
merci pour ce plugin !
J’ai un problème avec les images en float, comme
Le float rend l’image invisible :(
Est-ce qu’il y a moyen d’utiliser le plugin uniquement sur les images centrés ?
Ou est-ce que mon problème viens d’ailleurs ? A part moi personne ne rencontre ce problème ?
merci d’avance pour vos lumières
joz
j’imagine que ce n’est pas idéale, mais pour l’instant j’ai mis ceci comme work-around :
Répondre à ce message
Bonjour,
J’ai tenté pour la première fois d’installer ce plugin pour l’utiliser. Je suis actuellement en local donc je ne peux pas donner d’URL.
Cependant, voilà mon soucis. J’ai des images qui font entre 400 et 650px de large et je souhaite qu’elles soient adaptables sur une résolution < à320px (smartphone)
Mais cela ne semble pas fonctionner.
Avec firebug, je vois bien ce code là :
mais finalement on a l’impression que l’image adaptée par le plugin en 320px est redimensionnée dans sa taille d’origine ?
Est-qu’il y a une configuration que je n’ai pas comprise ?
Merci d’avance pour vos conseils
Jérôme
Bonjour, avec des images qui ne dépassent pas 650px cela ne sert à rien d’utiliser le plugin, comme expliqué en détail dans l’article de référence sur la méthode html utilisée. Je viens d’ajouter un avertissement clair à ce sujet.
Bonjour et merci pour ta réponse.
Alors j’ai juste une question...avec des images au dessus de 320px, les utilisateurs ne voit pas l’image en entier sur un smartphone, non ?
ou plutôt si il la voit mais cela affiche le site en fonction de l’image.
Y-a-t-il une solution simple pour qu’une image de plus de 320, soit redimensionnée en 320 si l’utilisateur est sur smartphone ?
j’ai bien un max-width:100% mais il n’a pas l’air de s’appliquer
Merci pour ton éclairage
Répondre à ce message
Pour les problèmes d’affichage des images sur les mobiles ou écrans 320px, et pour tous les problèmes d’affichage des images plus petites que 480px :
il suffit juste de supprimer la valeur 480px de la configuration « Breakpoints pour les variantes d’image »
Je ne sais pas si c’est la meilleure solution en terme de perf mais en terme de résultats ca fonctionne chez moi.
Après d’autres tests il faudrait peut-être aussi enlever la valeur 320px
Répondre à ce message
Bonjour et merci pour ce plugin !
Je suis en SPIP 3.0.15 et la version 1.9.0 du plugin sur un MacBook Pro avec écran Retina. Le site est en local sur mon ordinateur. Une version en 2.1.12 est en ligne ici, pour mieux visualiser mon problème : www.dintram.com.
Je pense arriver à me débrouiller avec les photos du site.
Néanmoins je n’arrive pas à faire en sorte que le logo du site (« DT » avec le drapeau marocain en haut à gauche et sur toutes les pages > LOGO DE CE SITE dans « Identité du site ») soit redimensionné proprement.
Le logo d’origine est en 135 px X 135 px et est tel quel même si je descends « La largeur mini. pour adapter » à 120 px par exemple.
Est-ce que le problème vient de la balise #LOGO_SITE_SPIP qui n’est pas traitée par le plugin ? Que dois-je adapter dans mon squelette (et/ou ailleurs : CSS ?) pour que l’image puisse être traitée ? Ou dois-je plutôt doubler la taille de l’image (j’ai essayé, ça ne change rien) ?
Merci beaucoup !
Salut,
as-tu diminué la valeur du « Poids min. pour adapter » ?
Une fois passé sous la valeur de ton logo, ça devrait fonctionner...
jean marie
Répondre à ce message
bonjour,
J’ai besoin d’ images de même taille en passant les dimensions en paramètre.
pour cela j’utilise image _passepartout,image_recadre et image_aplatir ...pour diminuer la taille cela rajoute width et height sur l’image.
si je n’utilise pas cette méthode certaines images sont top haute.
Comment faire pour que ces images puissent être agrandi par ce plugin sur mobile ?
pour les autres images c’est nikel chrome.
merci
Bon je précise en mettant ! important ; width:100% ; l’image grossie sur mobile mais ... comme c’est celle recadré qui est agrandie .... l’image est mauvaise
peut-on avoir un filtre de recadrage avec adaptative image ? un peu du style suivant avec éventuellement le choix de la partie recadre
Répondre à ce message
Après m’être pris la tête une demi-journée... voici mes conclusions...
Ce plugin fonctionne très bien... mis à part sur un point...
Celui-ci est compatible avec le changement de logo au survol tant que l’on applique l’attribut image_reduire dessus...
Voulant avoir un design responsive j’ai enlever image_reduire du #LOGO et là surprise... l’image ne change plus... pourtant en étudiant le code source le javascript fonctionne c’est simplement l’affichage que ne change pas...
ce que j’ai pu constater :
lorsqu’il n’y a pas image_reduire il y a la classe « adapt-img spip_logos »dans la balise img si il y a image_reduire il y a la classe « spip_logos » et ça fonctionne...
Si on enleve adapt-img (par exemple avec firebug ou webdevelopper...) tout refonctionne...
Je pense donc que le problème vient de là mais je suis bien incapable de le résoudre...
J’espère que quelqu’un trouvera une solution afin de pouvoir utiliser les #LOGO sur des sites responsive avec ce plugin (qui par ailleurs fonctionne très bien...).
bon bé j’ai réussi en modifiant la ligne 326 du fichier AdaptiveImages.php du plugin... mais je sais pô vraiment ce que ça engendre sur le tout... mais à priori ça fonctionne...
j’ai remplacer
$async_style = « html img.adapt-imgopacity:0.01html .adapt-img-wrapper:afterdisplay:none ; » ;
par
$async_style = « html img.adapt-imgopacity:1html .adapt-img-wrapper:afterdisplay:none ; » ;
Non il ne faut pas faire cette modification ça casse une partie essentielle du fonctionnement du plugin.
Je précise car ce ne semble pas très clair : il n’y a pas besoin du plugin pour faire un design Responsive. Le plugin sert à ce que, dans un design responsive, on puisse avoir de très grandes images sur des grands écrans et de petites images pas trop lourdes envoyées aux utilisateurs sur petits écrans. Je rappelle ce que je dis dans http://blog.nursit.net/Adaptive-Images-et-Responsive-Web.html :
Pour le cas de tes logos, le mieux, en attendant que je regarde si il est possible de prendre en charge les images au survol, est de desactiver adaptive image dessus en faisant :
[(#LOGO_ARTICLE|inserer_attribut{class,'spip_logos no-adapt-img'})]
Répondre à ce message
Bonjour,
Lorsque j’active dans les fonctions avancées « Activer la compression des scripts (javascript) »
les images sont d’une qualité très médiocre (elles sont .
C’est bizarre car il est dit plus haut que adaptive images n’utilise pas de javascript.
Sinon pour le reste ça fonctionne très bien.
dd
Répondre à ce message
Site powered by SPIP + Bootstrap + Adaptive Images
http://www.anonymousvideo.eu/
Adaptive Images is a good solution for RWD... Thanks Cerdic :)
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |