Le Sprite ® est une boisson gazeuse, qui est classé dans la catégorie des soda. Je ne vais pas vous parler des bienfaits de cette limonade et qu'il faut en boire avec modération, mais de l'utilisation de la technique "Sprites CSS" qui consiste à regrouper plusieurs images en une seule.

Un peu d'histoire: La méthode du sprite est utilisée depuis toujours par Google, et était également utilisée pour la réalisation des jeux vidéos comme Mario Bros. J'ai employé cette technique ici sur le site brikwo.com pour le menu qui se trouve à droite. J'ai regroupé les 14 images en une seule image (Gain: plusieurs Ko de gagné), je me retrouve donc avec une seule image dans ma feuille de style en background-image, je diminue par la même occasion le nombre de requête HTTP, passé de 14 (nombres d'images au départ) à 1 seule requête, ce n'est pas négligeable. Ensuite avec la CSS je déplace l'image en utilisant background-position: 0 -24px; suivant la position du lien et de l'icône voulu. On gagne également quelques octets sur la feuille de style, car le code est moins long.

On peut très bien se servir du Sprite CSS, pour un menu horizontal, pour la mise en place du thème (utilisé sur le thème school par exemple)

• Pompage.net : Sprites CSS
• Chargement d'image en CSS
• Propriété: Background-position
• Sprites generator