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.
...
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.
$ glue famfamfam_flag_icons/png sprite --namespace=monSprite
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.
Ajouter un commentaire