Réduire le nombre de requêtes au serveur en utilisant les sprites CSS

Venant tout droit des jeux vidéos, les sprites sont des images regroupant plusieurs éléments graphiques les uns à côtés des autres dans le but d’accélérer leur chargement et leur modification. Le sprite ci-dessous, par exemple, est tiré du jeu vidéo Legend of Zelda : Oracle of Seasons.

Si les sprites de jeux vidéo vous intéressent, vous pouvez jeter un œil sur le site Game Sprite.

Quel intérêt pour le développement web me direz-vous ? Imaginons une seule image PNG contenant l’ensemble des éléments graphiques du site. L’intérêt est double. Du côté serveur, puisqu’il n’y a qu’une requête HTTP effectuée pour la totalité des images, la charge est réduite. Du côté client, pour la même raison, la page s’affiche plus rapidement dans sa globalité. Des deux côtés, un gain de performance.

L’implémentation est simple et peut se faire de deux manières. Soit l’on utilise le style CSS background-position combiné à un background-image comme par exemple :

background:transparent url("./Images/Page/pageLayout.png") 0 -70px no-repeat;

Le premier chiffre donné en position est la distance par rapport au bord gauche, le second par rapport au bord supérieur. Notez que la distance est négative. C’est tout simplement parce que l’ordonnée n’est pas inversée comme il peut l’être sur des logiciels de graphisme comme Photoshop par exemple. Ainsi, si l’on veut spécifier une position en-dessous du point (0,0) il faut nécessairement que l’ordonnée soit négative.

La première méthode fonctionne bien lorsqu’elle n’est pas appliquée à une balise <img />. Or, pour des raisons d’accessibilité et de cohérence sémantique, il est préférable de garder des images présentes dans le code xHTML. Dans ce cas, on utilisera la propriété CSS clip. Exemple d’utilisation :

clip:rect(158px 20px 179px 0);

Il est nécessaire de bien faire attention avec clip car les positions, comme toutes celles en CSS, sont bien données dans le sens des aiguilles d’une montre. Ainsi, la position par rapport au bord supérieur est la première, suit celle par rapport au bord gauche, etc.

Pour plus d’informations sur les sprites CSS, je vous conseille la lecture de ce dossier de Smashing Magazine (en anglais).