Sprite CSS
Technique CSS, Sprite et feuille de styles
Il s'agit d'une technique qui rappellera des souvenirs aux utilisateurs d'amiga ou encore de TI 99 4/A.
Cela consiste à regrouper des images en une seule, puis d'utiliser CSS pour les découper et positionner. Concrètement cela a pour avantage de diminuer le nombre de fichiers à transférer. D'un autre côté le fichier regroupant les images sera possiblement plus lourd que la somme des images séparées. Cela n'a pas trop d'importance pour 2 raisons.
D'abord parce que charger un fichier à la place de 15 est plus rapide au final. Votre serveur n'aura plus à gérer des paquets de requêtes devenues inutiles. D'autre part, l'image sera mise en cache, donc pas d'inquiétude.
Autre avantage pour les rollover. Les images étant toutes présentes dans le même fichier, vous supprimez d'un coup les temps de latence a l'affichage et évitez d'avoir à recourir a un tas d'astuces en javascript pour précharger ces images.
En général, on n'utilise pas cette technique pour toutes les images, mais principalement pour des éléments en général de petite taille. Amazon utilise cette technique, ainsi que Facebook, etc.
Voici un des fichiers délivrés par Facebook :
Comme vous pouvez le constater, l'image est verticale. D'après des tests, c'est plus efficace qu'une image horizontale.
N'hésitez pas à regrouper des images de même couleur, c'est encore mieux, car le nombre de couleurs influe sur la taille de l'image finale. D'autre part évitez des trop grand placards, genre 1000px sur 3000 px. Le navigateur aurait du mal à gérer une si grande image. En plus, pensez aux mobiles qui ne disposent pas beaucoup de mémoire ni de puissance.
Mise en place d'un sprite CSS
C'est relativement simple, puisqu'il existe des outils gratuits et online qui vont vous mâcher le travail en regroupant les images et en générant le CSS. Vous pouvez bien sur le faire manuellement 😉
Le CSS ressemblera à ceci :
.mon image{
background: url(img/csssprite.png) 0 -100px no-repeat;
}
