Générer vos CSS sprites avec Glue

Par Jérémy Chatard le jeudi 04 juillet 2013

Glue est un programme (qui s'exécute en ligne de commande) pour générer les sprites utilisables de vos projets web.

Pour rappel, une sprite sheet est un fichier image rassemblant plusieurs images, comme celle présentée dans ce billet. L'intérêt de rassembler plusieurs images en une seule est de réduire le nombre de requêtes qu'un navigateur va réaliser pour télécharger ces images. Moins il y a de requêtes, plus le chargement de la page est rapide. A cela s'ajoute le fait qu'en réduisant le nombre de requêtes, on envoie et on reçoit moins de paquets. On réalise donc une économie de bande passante tout en réduisant notre impact écologique.

Revenons à Glue, pour l'installer suivez les instructions de la documentation. Si vous êtes Mac OS X et que vous disposez de Homebrew, rien de plus facile :

$ sudo brew install jpeg
$ sudo pip install glue

Supposons que vos images soient stockées dans un répertoire nommé images, en exécutant la commande suivante :

$ glue images sprites

Glue va générer la sprite sheet ainsi que le fichier CSS qui est nécessaire dans un répertoire sprites.

sprites
   ├── images.css
   └── images.png

Il ne vous reste plus qu'à lier la feuille de style générée dans vos templates HTML. Et de déclarer vos sprites en ajoutant les classes définies dans le fichier CSS, en utilisant par exemple des <span>.

Glue dispose de 20 milliards d'options, mais surtout j'en parle car il dispose de fonctionnalités très intéressantes de nos jours :

• création de sprites en multi-dpi, donc Retina,
• support de plusieurs sprite sheets par projet,
• suppression des zones transparentes inutiles,
• génération d'une feuille de style au format LESS,
• les images sont optimisées à l'aide OptiPNG,
• templates de génération personnalisables,
• etc.

Pour avoir utilisé pas mal d'outils pour générer des sprites sheet, je peux vous assurer que Glue est l'outil le plus efficace pour ce travail !

Après, si vraiment vous trouvez que votre processus de génération de sprite sheets est mieux, tant pis pour vous !