Générateur de sprites

Qu'est-ce qu'un sprite ?

Un sprite est une image qui en contient plusieurs.
Comme un exemple vaux mieux qu'un long discours, voila une exemple de sprite :

et un autre

Le premier, comme vous l'aurez remarqué viens de google. C'est en fait l'une des seules images du site !

A quoi ça sert ?

L'intérêt principal des sprites est de minimiser les temps de chargement et d'affichage sur les pages d'un site.
En effet, l'image chargée par le navigateur puis mise en cache peut être utilisée n'importe où dans la page sans qu'il y ai besoin d'en télécharger une nouvelle.
Là où l'effet se fait le plus ressentir est sur les "rollover" (les boutons qui changent d'aspect au survol de la souris, voir 2eme exemple) car l'image qui remplace la première au survol de souris est déjà chargée ! (donc plus besoin de pré-charger les images des rollover comme nous le faisions il y a quelques années en javascript).

Comment ça fonctionne ?

C'est là qu'intervient le CSS.

a.lang {

  padding-right: 20px ;

  background-repeat: no-repeat ;

  background-image: url(drapeaux.png) ;

}

a.lang.fr { background-position:   0px 0px }

a.lang.de { background-position: -20px 0px }

a.lang.it { background-position: -40px 0px }

a.lang.es { background-position: -60px 0px }

a.lang.uk { background-position: -80px 0px }

Ici imaginez un sprite avec des drapeaux de pays... au lieux d'avoir une image par drapeau, vous n'en avez donc qu'une.
Il suffit alors dans le CSS de définir la position de chaque drapeau via "background-position" et le tour est joué.

Comment créer des sprites rapidement ?

Pour vous éviter de faire les sprites à la main, vous pouvez simplement utiliser quelques outils online qui vous allez le constater... sont bien pratique !

spritegen.website-performance.org vous propose un générateur de sprites :
Vous mettez toutes vos images dans un .zip, vous uploadez ce fichier zippé et spritegen vous génére de lui même le sprite en vous donnant même le code CSS avec les positions qui conviennent !

spriteme.org vous propose quant à lui un "plugin" javascript à ajouter à vos favoris qui analyse les images de n'importe quel site sur lequel vous surfez et vous propose de générer des sprites avec ces images.