Solution Online

Faciliter l'intégration d'images responsives avec Grunt

Dernièrement, j'ai eu l'occasion de travailler avec Shiawuen sur une technique appelée Clowncar. Cette technique permet une intégration simple de vos images en mode responsive  : en fonction du périphérique (ordinateur, tablette ou modèle de smartphone), seul l'image dans sa résolution la plus appropriée est chargée. Cette technique est basée sur les articles d'Estelle Weyl.

En quoi consiste cette technique et ce plugin Grunt ?

Et bien, c'est assez futé et simple. Vous centralisez toutes vos photos (ou image pour votre site) dans un unique répertoire. Grunt et le plugin Grunt-Clowncar vont automatiquement créer un fichier SVG par photo (le 'car') et des miniatures (les 'clowns') de ces photos pour chaque résolution des périphériques visés.

Dans chaque SVG se trouve des directives de type media query permettant de pointer vers les miniatures en fonction des périphériques.

Au global, vous insérer les fichiers SVG tels de simples images dans votre page web. Automatiquement, le navigateur de votre périphérique ira chercher la miniature correspondante de la photo : la miniature est la plus appropriée à votre résolution. Nous sommes bien dans le cas d'images responsives mais en ne faisant qu'une petite ligne de code. Simple et efficace.

J'ai fait un petit 'livre de cuisine' (un cookbook) dispo ici : https://github.com/shiawuen/grunt-clowncar#cookbook.