Créer un sprite CSS sans se prendre la tête

Qu'est ce qu'un sprite CSS ?

En CSS, un sprite est une image unique regroupant plusieurs images différentes.
Cela permet de réduire les requêtes http pour les images insérées dans une page html.
Les positions absolues de chaque images sont indiquées dans un fichier css.
Avec ce procédé, l'insertion d'une image dans une page html ne se fait plus avec la balise <img> mais avec une balise <div>  ayant comme nom de "class" celui correspondant à l'image souhaitée et indiqué dans le fichier css.

Il existe sous Debian/Ubuntu, mais également pour Windows et OSX, une commande qui permet de générer un sprite CSS à partir d'un dossier contenant des images.

Cette commande se nomme Glue.

Pour l'installer sous Debian/Ubuntu :

$ sudo apt-get install libjpeg62 libjpeg62-dev zlib1g-dev python-dev python-pip
$ sudo pip install glue

ou

$ sudo apt-get install glue-sprite

Créer un sprite CSS tout simplement

$ glue source_dir output_dir

Par exemple :

$ glue famfamfam_flag_icons/png sprite

Le dossier famfamfam_flag_icons/png contient exactement 247 images PNG et la commande glue va donc créer un unique fichier PNG dans le dossier sprite regroupant toutes les images et un fichier css indiquant les positions de chaque image.

$ ls -1 famfamfam_flag_icons/png
ad.png
ae.png
af.png
ag.png
ai.png
al.png
am.png
an.png
ao.png
...
$ ls -1 sprite/
png.css
png.png
 

Il est possible de générer également la page html permettant de visualiser le résultat en ajoutant l'option --html.

$ glue famfamfam_flag_icons/png sprite --html
$ ls -1 sprite/
png.css
png.html
png.png

La commande glue génère les fichiers css, html et png en fonction du nom du dossier indiqué en source.
Par défaut, le nom des "class" commence par sprite-leNomDuDossierSource-leNomDuFichier.

$ head sprite/png.css 
/* glue: 0.4 hash: 1c2ef5e4ec */
.sprite-png-zw,
.sprite-png-zm,
.sprite-png-za,
.sprite-png-yt,
.sprite-png-ye,
.sprite-png-ws,
.sprite-png-wf,
.sprite-png-wales,
.sprite-png-vu,
 
Il est possible de modifier le nommage des "class" avec l'option --namespace=NAMESPACE.
 

$ glue famfamfam_flag_icons/png sprite --namespace=monSprite

$ head sprite/png.css 
/* glue: 0.4 hash: d6adc62ab7 */
.monSprite-png-zw,
.monSprite-png-zm,
.monSprite-png-za,
.monSprite-png-yt,
.monSprite-png-ye,
.monSprite-png-ws,
.monSprite-png-wf,
.monSprite-png-wales,
.monSprite-png-vu,

La liste complète des options est disponible avec l'option -h.

$ glue -h

Voici un exemple de l'image globale générée à l'aide de la commande glue.

sprite