Génération des images « responsives » avec la solution adaptive-images

Cette solution logicielle de Matt Wilcox détecte la taille de l’écran de votre visiteur et crée automatiquement des version des images adaptées à la dimension de son écran, les mets en cache puis fournit des images redimensionnés.

Cette fonctionnalité prends son sens dans le cadre d’un projet responsif.

Pré-requis techniques

1. Apache 2.x
2. PHP 5.x
3. GD lib

Principe de fonctionnement

On ajoute un fichier htaccess, qui détecte les images et les redirige vers un traitement php qui lui les redimensionne en fonction de la résolution de l’écran. Une ligne de javascript sur le site permet de charger la bonne image en fonction de vos media queries.

Attention! Cette solution détecte la résolution de l’écran, à ne pas confondre avec la taille du navigateur

Les fichiers

• .htacess à utiliser tel-quel ou à intégrer dans un htacess existant il redirige les images vers le traitement php avant le chargement de la page

    RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
  

• adaptive-images.php contient le principe de redimensionnement des images, ainsi que les paramètres de configuration.

  /* CONFIG ----------------------------------------------------------------------------------------------------------- */
  
  $resolutions   = array(1960, 1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
  $cache_path    = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!
  $jpg_quality   = 75; // the quality of any generated JPGs on a scale of 0 to 100
  $sharpen       = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
  $watch_cache   = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
  $browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
  

• page.html Rien à faire si ce n’est d’ajouter la ligne de javascript ci-dessous, en premier avant tous les autres javascript.

  <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>  
  

Démo

http://responsive.en-construction.net/adaptative_pics/

Chargez la page ci-dessus et regardez la taille de l’image. Elle devrait faire 1960, 1382, 992, 768, 480 pixels de large selon la résolution de votre écran. Vous pouvez changer la résolution de l’écran et recharger la page pour tester le fonctionnement.

L’image originale est ici : http://cyril-wolfangel.com/demos/2012/adaptative-images/IMG_0037.jpg

Sources

Matt Wilcox est l’auteur de cette solution que vous pouvez explorer plus précisément sur le site http://adaptive-images.com/ vous y trouverez les instructions d’installation complète et les fichiers originaux à telecharger.