Les Sprites CSS sont un moyen de réduire le nombre de requêtes HTTP faites sur les ressources images de votre site. Les images sont regroupées en une seule grande image, et sont accessibles via leurs coordonnées X et Y au sein de l'image. En affectant l'image générée aux bons éléments de la page la propriété CSS background-position peut alors être utilisée afin de ne rendre visible que la zone cible de l'image Sprite.

Cette technique est utilisée afin d'améliorer les performances d'un site, le gain de performance est significatif dans beaucoup de situations notamment dans le cas où il y a beaucoup de petites images, telles que les icônes de menus. La page d'accueil de Yahoo!, par exemple, utilise exactement cette technique.

Problèmes courants

Il y a quelques bogues de navigateurs vraiment très ennuyeux à prendre en compte lors de la création de Sprites CSS.

Opera

Opera (dans les versions inférieures ou égales à la version 9.0) ne reconnais pas une position de fond (background-position) supérieure à 2042px ou inférieure à -2042px et utilise ces limites à la place. L'outil fait attention à cela en créant une nouvelle colonne avec les images d'entrées à chaque fois que la limite verticale est atteinte.

Safari

Safari a un problème avec la répétition des images de fond. Heureusement cela peut être facilement résolu en spécifiant une valeur d'espacement vertical plus large (configurable).

Lectures Complémentaires

A List Apart a publié un article intitulé CSS Sprites: Image Slicing's Kiss of Death qui explique les concepts cachés derrière les Sprites CSS. Si vous êtes novice avec cette technique, nous vous suggérons fortement la rubrique A List Apart et jetez un coup d'oeil.