[Web Développement et Design] Les Sprites CSS

Je pense que vous êtes nombreux a avoir entendu parler des sprites CSS et que même certains d'entrevous les utilises déjà. C'est une technique encore un peu obscure et trop peu utilisée !

Que-est ce que des "Sprites CSS"

Rien de bien sorcier en fait. Il s'agit d'une technique qui consiste à regrouper toutes (ou une partie) de vos images utilisées dans vos CSS en une seule et de la positionner ensuite via des coordonnées X et Y. Les parties de votre site ayant besoin d'afficher une des images agiront en fait comme une fenêtre donnant sur votre sprite !

Voici une illustration :

Le bloc H1 laisse apparaitre une des images se trouvant sur le sprite, les autres n'étant pas visibles puisque "hors bloc". Pour vous, la seule chose qui change c'est qu'au lieu de mettre :

Vous aurez quelque chose du style:

Voici un exemple de sprite venant de youtube:

Pourquoi utiliser les sprites CSS ?

Le fait de remplacer une dizaine (ou plus) d'images par une seule va permettre de soulager votre serveur qui ne devrait plus se taper des dizaines de requêtes HTTP à chaque page affichée. Cela se traduit donc par une charge moins élevée (et donc de la puissance disponible pour d'autres taches) et un affichage plus rapide. De plus, si vous utilisez des liens avec des images au survol (:hover), il n'y a plus de temps de latence pour l'utilisateur puisque toutes les images sont chargées d'un coup.

Pour ce qui est du poids, là rien de spécial, en général le sprite fait sensiblement le même poids que l'ensemble des images le composant, même si la superficie est plus importante. De plus, vous pourrez optimiser (voir smush.it) votre sprite en une seule fois, plutôt pratique.

Trop beau pour être vrai ?

Les sprites sont à manipuler avec précautions. Le positionnement de vos images doit être bien réfléchi pour ne pas se retrouver avec des problèmes de conceptions (plusieurs images visibles dans un élément, ....). Un des autres inconvenant c'est que pour faire une simple modification de l'une de vos images, il faut re-générer le sprite en entier.

Et enfin, les sprites ont leurs limites, notamment dans le cas d'images répétées (repeat, repeat-x, repeat-y) ou d'alignement différent (background-position: top right; background-position: bottom left;). Nous verrons ces cas particuliers un peu plus loin.

Je suis convaincu, je veux faire mon 1er sprite CSS !

Selon la complexité de votre design, il va être plus ou moins facile de faire votre sprite. Dans le cas où vos images ne sont pas répétées et s'alignent toutes du même coté (droite ou gauche), la méthode est assez simple puisqu'il suffit "d'empiler" vos images en laissant une marge entre chaque, comme ceci:

Pensez a laisser le fond transparent (ou blanc si votre design le permet) et d'enregistrer le tout en gif ou png avec transparence.

Ensuite, il faut placer votre sprite de la manière suivante:

Donc ici on a décalé notre sprite de 320 pixels vers le haut. Cette valeur correspond tout simplement à la distance entre le haut du sprite et le haut de l'icône "Forum". Pour l'icône "Facebook" qui se trouve à 95 pixels du bord, on écrira:

Cela n'a donc rien de bien sorcier

Et si vous ne voulez pas sortir votre photoshop, il existe des générateurs de sprites permettant de créer une image unique depuis un zip contenant toutes vos images. Personnellement je recommande celui-ci: spritegen
Il est assez complet et en français. Il vous suffit dons d'uploader votre zip contenant vos images et l'application vous retournera le sprite ainsi que les positions CSS à appliquer !

Pensez bien à laisser une marge suffisante pour que 2 images ne soient pas visibles dans vos éléments (ça arrive lorsque vous utilisez un padding trop important par exemple)

Parfait, mais mon design utilise des images alignées de manières différentes

Si vous utilisez des images qui doivent s'aligner à droite et d'autres à gauche ou parfois en bas, la conception de votre sprite va demander une petite adaptation ! Attention, je parle ici d'images de background ayant un conteneur beaucoup plus grand qu'elles, comme la cas d'un titre Hx (largeur souvent importante), du body (hauteur importante), etc ...

Voici un exemple :

(On ne se moque pas de mes images hein ! -_-)

Donc les images qui doivent s'aligner à gauche sont placées à gauche (en fait, ce n'est pas obligatoire, mais c'est plus simple) et les images alignées à droite sont placées sur le bord droit. Pour les images devant s'aligner sur le bas, là il serait préférable de faire une sprite à part pour les regrouper de façon horizontale.

Tout ce bidouillage à cause du manque d'offset pour les alignements droite et bas. Car autant il est possible de placer une image précisément tout en la "fixant" à gauche ou en haut, autant dès qu'on la fixe à droite ou en bas il est impossible de préciser la valeur en pixels. L'autre chose ennuyante avec les alignements à droite, c'est IE6 ! Oui encore lui ! Il semblerait que le fait d'utiliser une valeur en toutes lettres et une valeur en pixels dans le positionnement créer des bugs d'affichage, par exemple un background-position: right -100px; risque de ne pas donner le résultat escompté.

Les images répétées

Les images utilisant la propriété background-repeat: repeat; ne peuvent pas être incluse dans une sprite, tout simplement parce qu'elles ont besoin d'être répétées à la fois sur la verticale et sur l'horizontale

Pour les autres, il suffit de regrouper les images qui doivent se répéter sur l'axe Y dans une sprite horizontale et les images qui doivent se répéter sur l'axe X dans une sprite verticale.

Un détails qui a son importance, comme en général vos images de répétition servent à remplir parfaitement une zone de votre design (sans espaces/marges donc), il faut penser à bien remplir toute la surface (en hauteur dans le cas d'un repeat-y et en largeur dans la cas d'un repeat-x). Voici un exemple (va falloir zoomer pour bien vous rendre compte). Donc sur cette sprite, les images prennent toute la hauteur (2 pixels dans ce cas) sans laisser de vide pour pouvoir être répétées verticalement.

Conclusions

Les sprites CSS permettent d'améliorer les performances de votre site de façon significative. Par contre selon la configuration de votre design il pourra être plus ou moins laborieux de construire vos sprites.

• Smush.it (optimisation d'images) : http://developer.yahoo.com/yslow/smushit/
• Spritegen (générateur de sprites) : http://fr.spritegen.website-performance.org/