Lorsque l’on code un site web, on est souvent obligé d’utiliser beaucoup de petites images, des coins, des puces, des icônes, des symboles, des flèches et autres.
Lors du chargement la page fait autant d’appels réseau qu’il y a d’images différentes sur la page. Ce qui peut allonger le temps de chargement.
Il existe une technique qui permet de limiter ces accès multiples en n’ayant qu’une seule image.
Il suffit d’un peu de css pour positionner correctement l’image afin que n’apparaisse que la partie voulue: Cette technique s’appelle le sprite.

Cependant il n’est pas aisé de regrouper les images en une seule et surtout de récupérer les coordonnées permettant l’affichage de l’extrait d’image souhaité.
Heureusement votre grenouille préférée vous a trouvé deux petits software qui vous aideront dans cette difficile tache.
cssSpriter
Sprite Sheet Packer
Ces deux outils non seulement génèrent une image unique à partir de vos différentes images, mais génèrent également les codes html et css vous permettant de les intégrer dans vos sites webs.

Cette technique est également utilisée dans les jeux afin d’animer des personnages en faisant défiler les différentes postures d’un personnage par modification dynamique de la position de l’image.
j’avais déja abordé les animations avec sprite ici