Informations générales

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 le contenu éditorial d’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 : sur un site Responsive la même page est rendue de manière différente selon la taille de l’écran.

Configuration

Le plugin s'installe comme tous les autres et se configure dans les Paramètres du blog.

Options

Trois options sont disponibles :

  1. La première permet d'indiquer la largeur maximale des images qui seront affichées sur votre blog. Par défaut celle-ci est positionnée à 640 pixels. Sur un photo-blog il est probable qu'il faille augmenter cette valeur à 800 voire 1024 pixels ou plus.
  2. La deuxième permet d'indiquer la largeur minimale des images qui devront être adaptées. Par défaut celle-ci est positionnée à 320 pixels. Les images de tailles inférieures resteront inchangées.
  3. La troisième permet de préciser la couleur de fond à utiliser lorsque le plugin génèrera des images JPG à partir d'images possédant un fond transparent. Par défaut la couleur de fond est blanche (#ffffff).

Qualités de compression JPEG

Quatre qualités sont paramétrables :

  1. Celle utilisée pour les images de prévisualisation, affichées pendant le chargement des images complètes. Il vaut mieux utiliser une valeur faible afin de limiter autant que possible la taille de ces images. La valeur par défaut est 10.
  2. Celle utilisée pour les images standards. La valeur par défaut est 75.
  3. Celle utilisée pour les images 1,5 fois plus denses. La valeur par défaut est 65.
  4. Celle utilisée pour les images 2 fois plus denses (utilisées sur les écrans rétina par exemple). La valeur par défaut est 45.

Options avancées

  1. La première permet d'activer le chargement à la volée des images. Ce mode permet de ne créer les images requises qu'au moment où elles sont réellement requises. Dans le cas contraire, toutes les variantes nécessaires sont créées au chargement de la page, si les images n'existent pas déjà, évidemment.
  2. La seconde permet de préciser les seuils de génération des images. Ces seuils sont un compromis entre les seuils utilisés par les mediaqueries du thème de votre blog et les résolutions et densités des écrans utilisés pour le visualiser. Par défaut ces seuils sont paramétrés à 160, 320, 480, 640, 960 et 1440 pixels.

Si vous activez la première option vous devrez alors configurer un fichier .htaccess contenant, pour une installation standard de Dotclear (installée dans un répertoire nommé dotclear à la racine de votre hébergement), ceci :

RewriteEngine On
RewriteBase /dotclear/

# If file or directory exists deliver it and ignore others rewrite rules
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule "." - [skip=100]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule "." - [skip=100]

# On demand adaptive image
RewriteRule public/.adapt-img/(.+)$ index.php?adapt-img/$1 [QSA,L]

Cela permettra au plugin de générer les images nécessaires à la volée, lors de leur premier affichage.

Divers

Si vous modifiez un ou plusieurs paramètres de ce plugin il sera peut-être utile de vider le cache existant. Une tâche d'entretien est disponible à cet effet et accessible avec l'option Maintenance (menu Plugins), elle est intitulée « Vider le cache des images adaptatives ».

Personnalisation

Plusieurs classes sont utilisées par ce plugin :

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; }

Notez que le wrapper est un <span> ou une <div>. La seconde forme est utilisée dès lors que l'image est flottante ou centrée.

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

Pour empêcher le plugin d’adapter certaines images que vous voulez conserver intactes, il suffit de leur ajouter une classe no-adapt-img.

Informations techniques

  • Version du plugin : 3.2
  • Version minimale de Dotclear : 2.28
  • Licence : GNU GPL v2
  • Support : Billet dédié