Gagner des ressources avec le sprite css

Un moyen efficace pour gagner en nombre de requêtes serveur.

Le sprite css est une image qui contient l’ensemble des images dont nous allons avoir besoin. En utilisant un sprite css, nous effectuons donc une seule requête pour obtenir l’image qui sera ensuite mise en cache navigateur. L’exemple que vous voyez ci-contre est le sprite css de Google.

Mais comment l’utiliser dans la pratique?

C’est relativement simple. Imaginons que dans un div, nous ayons un div nommé « suite »:

Du texte ici <div id=suite></div>

Nous allons ensuite donner forme à cela en css (d’abord la taille du bloc d’image, puis le placement du background pour tomber sur l’image souhaitée):

#suite {width:28px;height:28px;background:transparent url(http://www.google.com/images/nav_logo8.png) no-repeat;background-position:-136px -63px;}

Nous positionnons donc notre « curseur image » sur la position -136 et -63, puis affichons un carré de 28 pixels.

Magic!