Adaptive Images

Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation.

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.

Cependant HTML 5 ne prévoit pas encore de balisage ni d’API spécifique à ce besoin, et il est compliqué d’y répondre en l’état : de nombreuses techniques existent, toutes ayant des avantages et inconvénients, plus ou moins simples à mettre en œuvre.

Ce plugin automatise la technique des 3 couches basée sur HTML/CSS/JS.
Cette technique requiert un markup un peu compliqué mais elle a quelques avantages :

  • elle préserve l’accessibilité ;
  • elle ne nécessite pas JavaScript ;
  • elle permet un rendu progressif ;
  • elle prend en compte les problèmes de performance et de cache.
L’utilisation du plugin Adaptive Images n’a de sens que si on veut servir à la fois de grandes images de haute résolution pour les tablettes et desktop, sans pénaliser pour autant les smartphones à petits écrans 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 ;
  • adaptation à la qualité de la connexion : rendu progressif avec une prévisualisation de basse qualité, et pas d’image 1.5x ou 2x si mauvaise connexion ;
  • adaptation du contenu : possibilité de fournir une version recadrée de l’image pour les petits écrans mobiles.

Limitations
Le plugin ne fournit pas d’image adaptée dans Internet Explorer<10.

La qualité de connexion n’est pas détectée sur les périphériques iOS à ce jour (mais sera presque certainement automatiquement prise en charge dans une prochaine mise à jour de iOS).

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.

Optimisation

Certains squelettes, notamment squelettes-dist/ fourni avec SPIP, appliquent automatiquement un filtre |image_reduire sur tous les contenus éditoriaux, comme par exemple :

  1. [(#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 est donc préférable de supprimer ces filtres.

Cependant, il est conseillé d’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) :

  1. [(#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.

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.

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.

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" :

###
# Adaptive Images

RewriteRule \badapt-img/(\d+/\d\dx/.*)$ spip.php?action=adapt_img&arg=$1 [QSA,L]

# Fin des Adaptive Images
###

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.

Compression JPG
Vous pouvez définir la qualité de la compression des images JPG utilisées pour les différents affichages : Image d’aperçu basse qualité, image 1x, image 1.5x, image 2x.

Pour l’image d’aperçu la valeur indiquée est prise comme une valeur de base pour une image d’origine de 450Kpx, et le plugin pourra varier de +/- 50% autour de cette valeur en fonction de la taille de l’image utilisée pour produire l’aperçu (afin de garder un niveau d’information à peu près constant)

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.

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

  1. define('_ADAPTIVE_IMAGES_DOMAIN','http://example.org/');

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 _ADAPTIVE_IMAGES_MAX_WIDTH_MOBILE_VERSION. L’interface indique la largeur minimum attendue, ici 640px donc.

Pour que le rendu soit correct dans toutes les conditions, la variante pour petits écrans doit avoir les mêmes proportions que l’image principale. 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 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 :

  1. img,.adapt-img-wrapper { border-radius:5px; }

Les images fournies à Internet Explorer < 10 ont aussi une classe spécifique adapt-img-ie.

Cas particuliers

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. Dans l’exemple ci-dessus ce serait |adaptive_images{960}

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.

Notes

[1on parle de device en anglais

Dernière modification de cette page le 13 février 2019

Discussion

37 discussions

  • 1

    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

       #SET{largeur,#ENV{lalargeur}}  #SET{hauteur, 0}  #SET{logol,#GET{logo}|largeur}  #SET{logoh,#GET{logo}|hauteur}
      [(#GET{logol}|<={#GET{logoh}}|?{" ",""} ) #SET{largeur,0} #SET{hauteur,#ENV{lahauteur}]
      [(#GET{logo}|image_passe_partout{#GET{largeur},#GET{hauteur}}
      |image_recadre{#ENV{lalargeur},#ENV{lahauteur}}|image_aplatir{jpg,ffffff,128})]

    Répondre à ce message

  • 2

    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 :

      Mais il est clair que l’utilisation d’Adaptive Images n’a de sens que si on veut servir à la fois de grandes images de haute résolution pour les tablettes et desktop, et ne pas desservir pour autant les smartphones à petits écrans (voire des montres ?).
      Si les meilleurs images dont on dispose ont des dimensions de l’ordre de 640px, il n’est pas du tout sur que le jeu en vaille la chandelle, et il est probablement aussi bien de servir ces images pour tous les utilisateurs.

      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

  • FreeAnons

    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

  • 1

    J’ai un comportement que j’ai du mal à comprendre sur de grandes images.

    Soit un

    1. [(#LOGO_ARTICLE|adaptive_images{1160})]

    Sur un grande résolution, l’image s’affiche en 640px et si l’on clique dessus, elle passe bien à 1160px.

    J’ai repéré dans la lib
    Maximum width for fallback when maxWidth1x is very large
    En changeant $maxWidthFallbackVersion de 640 à 1200, je n’ai plus ce problème.

    • Le responsable de ce petit soucis n’est pas du tout le plugin mais un bête

      .leselecteurduslide img {
      width:100%;
      }

      dans la feuille de style de ResponsiveSlides que j’utilisais. Sans lui tout fonctionne très bien.

      Désolé pour le bruit et merci pour ce plugin très utile.

    Répondre à ce message

  • Bonjour,
    est-il normal que les vignettes des images ne soient pas mises en cache (du moins, elles apparaissent joliment codées dans le corps de l’html), dans un article, même avec le filtre adaptive_images sur la balise #TEXTE ?
    J’ai « résolu » mon problème en ne réadaptant pas les images de la taille des vignettes, mais je ne suis pas sûr que ce soit l’idéal.
    Je précise que j’utilise le plugin sur un site non responsive.
    Merci !

    Répondre à ce message

  • Un petit retour sur l’utilisation de Adaptive Images (V 1.9.1) avec la dist (SPIP 3.0.14) et Zpip-dist v1 (V 1.7.26) (comme j’ai passé un moment à trouver la solution, je la partage, si ça peut servir) :

    Lorsque l’on insère une image centrée dans un article, la feuille de style spip.css de la dist (idem avec Z-dist : spip_style.css) ajout un display : table ; à la classe spip_documents_center. Du coup, Adaptive Images ne peut pas bien faire sont boulot en réduidant la largeur de l’image en fonction de son conteneur.
    La solution que j’ai trouvé est de mettre display : block ; (comme dans Bootstrap/SPIPr).

    Peut être qu’il faudrait surcharger le style ou le modèle depuis le plugin, je en sais pas.

    Répondre à ce message

  • 2
    Stéphane

    Bonjour,

    Je ne trouve nulle part comment faut-il faire pour adapter les logos des articles ou est ce que dédié que pour les images et documents ?

    Merci

    • Stéphane

      Oubliez ce que j’ai dit :)

    • Hello,
      J’ai la même question ?
      Pourquoi « oubliez » ? Parce que c’est pas possible ? Parce que Stéphane a trouvé ?...

      Merci

    Répondre à ce message

  • 2

    Bonjour,

    Merci pour ce plugin.
    Intégrer adaptive-images (http://adaptive-images.com/) dans un site SPIP est une idée que j’avais depuis longtemps et votre plugin me simplifie grandement l’opération.

    Dans mon cas, les images dans leurs différents formats sont bien générées en cache, mais leur utilisation est contrariée dans certains cas.

    Ex : j’ai un slider (bxslider) en page d’accueil de mon site. Le code Javascript associé à ce slider se base sur une structure HTML pour trouver les images à afficher (1re image directement contenue dans une li de l’ul possédant l’id bxslider.

    Bref, le js du slider reste indifférent aux images en background de span. Ne trouvant pas les images, il reste bloqué sur l’animation d’attente de chargement de celles-ci.

    Plutôt que de remplacer ma balise img originale par une structure du type span img (permettant en temps normal un chargement progressif, mais contrariant dans ce cas mon javascript de slider), est-il possible d’adapter votre plugin pour profiter d’une permutation simple : une balise img chasse l’autre balise img ?

    Si oui, dans quelle direction dois-je chercher ?

    Merci de m’avoir lu,
    Régis

    • Bonjour,
      ce plugin n’est pas basé sur http://adaptive-images.com/ qui possède certains inconvénients, mais sur la librairie https://github.com/nursit/AdaptiveImages qui implémente une technique alternative, dite des 3 couches.

      Pour répondre à ta question, non il n’est pas possible de se passer d’une structure span>img avec cette technique. C’est un inconvénient connu de la technique, mais il est en général assez facile à prendre en compte.
      En l’occurence, ici je pense qu’il faut penser à faire évoluer le slider, ou changer de librairie slider, car dans tous les cas l’avenir des images adaptatives passera par un markup plus complexe qu’une simple balise img.

      Pour SPIP, il y a le plugin Nivo Slider qui fonctionne bien.

    • Merci pour cette réponse !

    Répondre à ce message

  • Hello,

    Niveau SEO (référencement d’images par exemple), ça donne quoi ? Possibilité de fournir la version originale de la page aux user agent des googlebot ?

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom