(modifié le 16 juillet 2013 à 20:11)

SpriteMe est un webservice très pratique permettant d'optimiser le poids d'une page web, ce qui influence directement son temps de chargement. SpriteMe est capable de générer vos sprites CSS de façon complètement autonome.

Si vous ne connaissez pas le principe de sprite CSS, je vous invite à lire ce billet chez Pompage. Pour résumer grossièrement, utiliser des sprites signifie regrouper tout ou partie de vos images dans une une seule et même image. Ceci pour limiter le téléchargement d'entête de chaque image qui finit par être lourd si le nombre d'image est conséquent. Cette technique n'est plus à prouvée et a été adoptée depuis longtemps par tous les géants du web (Google, YouTube, etc.)

Pour utiliser SpriteMe, il vous suffit d'ajouter le bookmark dédié en le glissant (drag) dans votre barre personnelle Firefox par exemple. Allez sur le site de votre choix et cliquer simplement sur le lien "SpriteMe" :

Essayons sur la FredZone qui a récemment opté pour un nouveau design (et ça faisait longtemps que je ne lui avais pas fait de backlink pour l'égometre) :

Cliquer sur Make all (ou Make Sprite) pour générer un fichier comportant toutes les images, la transparence étant supportée.

Et voici ce que l'on obtient comme image pour "notre" FredZone (la qualité de l'image est due à ma compression en PNG, aucune perte en réalité), cliquez sur l'image :

En cliquant sur Export CSS, on obtient le CSS correspondant avec la position de chaque image. Voici un extrait de notre exemple :

DIV id=haut
{
 background-image: url(http://www.fredzone.org/wp-content/themes/RealFredzone/img/sprite.png)
 background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/15fbcc17a2/spriteme1.png);
 background-position: -10px -650px;'
}
A sprite_global
{
 background-image: url(http://www.fredzone.org/wp-content/themes/RealFredzone/img/sprite.png)
 background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/15fbcc17a2/spriteme1.png);
 background-position: -1490px -1930px;'
}
A sprite_global
{
 background-image: url(http://www.fredzone.org/wp-content/themes/RealFredzone/img/sprite.png)
 background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/15fbcc17a2/spriteme1.png);
 background-position: -1915px -1930px;'
}

Notre exemple n'est pas excellent (non monsieur, ça ne vient pas de la FredZone, roh!) car certaines images dépendent des articles qui sont chronologiques, alors que les sprites doivent être utilisés sur des éléments fixes (fond, headers, images, etc) et n'évoluant pas dans le temps, à moins d'automatiser la génération des sprites...

Attention : SpriteMe ne semble pas fonctionner si vous utilisez des fonctions de minifications.

A voir également cette vidéo de présentation.

Inspiré d'un très bon billet chez Smashing Magazine

SpriteMe - FAQ