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

38 discussions

  • 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

  • Bonjour,
    Merci pour ce plugin !
    Je suis en train de développer un site responsive utilisant beaucoup de grandes images et ce plugin tombe à point !
    J’ai toutefois un petit problème qui a fait que pour l’instant j’ai désactivé le plugin.

    En utilisant le critère adaptive_images{} dans mes squelettes, les images adaptées n’apparaissent à la bonne résolution que lorsque l’on clique dessus (le on mousedown présent ds la balise img j’’imagine), si je ne clique pas dessus la version proposée est très très pixellisée... Mon site utilise pas mal de plugins jQuery et j’utilise la version 10.1 de celui ci, serait ce lié ?

    Répondre à ce message

  • 2

    Bonjour,

    Pour réaliser des pages de diaporama, j’utilise le portfolio de Spip. Pour répartir les images à ma convenance, je les fais apparaitre dans les cellules d’une table. À cet effet j’utilise la balise #FICHIER : [(#FICHIER|image_reduire{500})]. Tout fonctionne bien, du moins sur un grand écran.

    Avec le plugin adaptive_images j’obtiens une page blanche. Si je mets [(#FICHIER|adaptive_images{500})] les divers éléments reviennent, mais je n’ai aucune image !

    Faut-il insister ? Le plugin fonctionne-t-il avec #FICHIER ?

    Merci de vos éclaircissements
    Béat

    • La page blanche est probablement due au nombre d’images qu’il faut calculer la première fois. Il faut recharger la page jusqu’à ce que ça passe si il y a beaucoup d’images dans la page (pour éviter cela, voir le réglage « Production des images à la demande »).

      #FICHIER n’est pas une image mais un nom de fichier, il faut donc dans ce cas le transformer en image à l’aide de :
      [(#FICHIER|balise_img|adaptive_images{500})]

      Enfin, le plugin n’a d’intérêt que pour afficher des grandes images sur les grands écrans en évitant de les charger sur des petits écrans.
      Pour des images de 500px c’est pas du tout évident qu’il soit avantageux d’utiliser une gestion d’images adaptatives, et il est plus simple et rapide de servir les images de 500px à tous les utilisateurs.

    • Merci pour cette rapide réponse.

      Malheureusement, avec |balise_img c’est encore pire, les textes de la page disparaissent eux aussi ! J’ai beau recharger, d’ailleurs en phase d’essais, je n’ai que 3 images.

      J’ai aussi fait la manip dans htaccess sans constater de changement.

      Tout à fait d’accord pour les images à 500px, mais je suis en phase de construction/test et je pense bien faire des images plus grandes au final.

    Répondre à ce message

  • 1

    Bonjour, et merci pour ce plugin.
    Je teste en local ce plugin qui pour le moment fonctionne, sauf pour le réglage sur
    mobile en mode portrait (320x480) : pas de génération d’images.
    Les images apparaissent lorsque j’agrandis la fenêtre jusqu’à 450px de large.
    Mes réglages sont les réglages de base, sauf

    Largeur max. des images adaptées (px) : 1200
    et
    (#TEXTE|image_reduire0,500)

    Je n’ai rien touché d’autre.
    Par contre si je mets

    (#TEXTE|adaptive_images640)

    les images apparaissent mais ne sont pas redimensionnées.
    Où est ce que je me trompes ?
    Bonne journée.

    • Après vérification plus fine, les images disparaissent lorsqu’elles font 433px de large et réapparaissent à 434px...
      Est ce qu’il s’agit du rapport demandé en bas de la boite de configuration ? Je n’ai ce 433 ou 434 nulle part sur mes fichiers.

    Répondre à ce message

  • Bonjour,

    je suis chez free, et j’ai un gros fatal erreur rien qu’à l’activation du plugin :
    Fatal error : Allowed memory size of 33554432 bytes exhausted (tried to allocate 2560 bytes) in /mnt/159/sdb/9/1/les.webmaster/projettut/spip/plugins/adaptive_images/lib/AdaptiveImages/AdaptiveImages.php on line 1142

    J’utilise SPIP 3.0.13, si besoin de plus d’informations comme la version de php...

    Répondre à ce message

  • 6

    Bonjour,

    Bon je pensais tester mais ici ça casse tout :-( Le seul fait d’activer le plugin, c’est page blanche ! Sans même utiliser le filtre, avec uniquement ce plugin (j’ai désactivé tous les autres).
    Sur une 3.0.13 à jour ... mais dont la spécificité est d’être en « ferme », mais je ne vois pas en quoi cela aurait une influence.
    Un truc que je devrais regarder ?
    PIerre.

    • Les log Apache/PHP pour voir ce qui provoque une erreur fatale. Quelle est la version de PHP utilisée ?

    • Salut !

      J’ai testé avec 3 versions de PHP, 5.3.27, 5.4.19 et 5.5.3, tout pareil, seul moyen de m’en sortir est d’effacer le plugin.
      Le log Apache ne semble retourner aucune erreur par contre effectivement, celui de PHP a l’air de couiner :

      [11-Jan-2014 11:47:26 Europe/Paris] PHP Fatal error : Uncaught exception ’InvalidArgumentException’ with message ’Property maxImagePxGDMemoryLimit needs an int value’ in /Users/zapilou/Zap/zapilou_web/vps9/plugins/auto/adaptive_images/v1.6.1/lib/AdaptiveImages/AdaptiveImages.php:157
      Stack trace :
      #0 /Users/zapilou/Zap/zapilou_web/vps9/plugins/auto/adaptive_images/v1.6.1/adaptive_images_options.php(102) : AdaptiveImages->__set(’maxImagePxGDMem...’, ’2459168.1’)
      #1 /Users/zapilou/Zap/zapilou_web/vps9/ecrire/inc/utils.php(79) : include_once(’/Users/zapilou/...’)
      #2 /Users/zapilou/Zap/zapilou_web/vps9/sites/lougo/tmp/cache/charger_plugins_options.php(10) : include_once_check(’/Users/zapilou/...’)
      #3 /Users/zapilou/Zap/zapilou_web/vps9/ecrire/inc_version.php(352) : include_once(’/Users/zapilou/...’)
      #4 /Users/zapilou/Zap/zapilou_web/vps9/ecrire/index.php(14) : include(’/Users/zapilou/...’)
      #5 main
      thrown in /Users/zapilou/Zap/zapilou_web/vps9/plugins/auto/adaptive_images/v1.6.1/lib/AdaptiveImages/AdaptiveImages.php on line 157

      Genre _IMG_GD_MAX_PIXELS n’est pas un entier ... mais je vois pas ou est paramétré cette constante ... je suis sur MAMP pour ce serveur.

      Pierre.

    • OK en effet, ce n’est pas normal que _IMG_GD_MAX_PIXELS ne soit pas un entier.

      Je vais envoyer un patch pour que ça plante pas dans ce cas, et regarder dans le core SPIP comment on peut avoir une valeur pareille (la constante est automatiquement calculée par essais/erreurs sur la page de configuration avancée des images, là où on sélectionne GD2 comme librairie de traitement d’images).

    • Content d’avoir fait avancer le schmilblick, dispo pour autres essais si nécessaire.

    • Merci à toi. La version 1.6.2 du plugin corrige le problème.

    • Ok testé, ça marche maintenant je peux utiliser ! Merci !
      P.

    Répondre à ce message

  • 3
    Renée Picard

    J’espérais que ce plugin adapterait les images présentés en diaporama nivo slider ?
    Comment faire ?

    • Renée Picard

      J’ai oublié d’écrire que j’ai fourni des images recadrées pour la version mobile.

    • Nivoslider ne gère pas très bien le Responsive pour le moment, et du coup l’adaptation des images ne donne rien de bien. J’ai provisoirement désactivé la prise en charge dans nivoslider (http://zone.spip.org/trac/spip-zone/changeset/79425/_plugins_/nivoslider/trunk) en attendant de regarder cela de près, mais ça concerne exclusivement ce dernier.

    • Renée Picard

      Merci pour cette réponse. SVP me prévenir lorsque Nivoslider sera responsive.
      En attendant j’ai installé ResponsiveSlides.
      J’aimerais vérifié si ma façon de faire est correcte ?
      Il me semble que cela pourrait être beaucoup mieux.
      Dans sommaire.html, j’utilise un article dédié que j’appelle avec cette boucle

      <BOUCLE_articles(ARTICLES) {titre_mot=img-une} >
      [(#TEXTE|adaptive_images{640})]
      </BOUCLE_articles>

      Dans l’article ayant le mot-clé img-une, j’ai simplement mis :

        
      <div class="rslides_container">
         <ul class="rslides" id="slider1">
          <li><doc25|right></li>
           <li><doc26|right></li>
          <li><doc27|right></li>
          </ul>
      </div>

      Merci encore pour ce plugin !

    Répondre à ce message

  • 1

    Merci pour cette extension que je vais tester dès que possible.

    Juste une question : l’effet obtenu avec le filtre |image_proportions du plugin image_responsive d’ARNO* est-il possible avec ce plugin s’il te plaît ?

    • Non, mais c’est en effet un filtre de re-cadrage d’images qu’il faudrait proposer de manière générique !

    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