Dès lors que l'on utilise des images dans un page web et plus généralement sur son site, il arrive un moment où l'on va chercher à optimiser l'utilisation de ses images.

Une technique d'optimisation consiste à fusionner toutes ces images en une seule et à "déplacer" l'image sur le fond afin d'afficher la partie utile : Le CSS Sprites.

Par exemple, vous créez votre image fusionnez avec toutes vos sous-images :

Il vous suffira ensuite de gérer vos CSS comme ceci :

Une classe qui contiendra l'image de fond :

.maClasse{background-image:url(monimage.png);} 

Et ensuite une seconde classe sur chacun de vos boutons afin de définir le logo à utiliser :

.maClasseBtn1{background-position:0px -16px;}

.maClasseBtn1{background-position:0px -32px;}

...

Exemple :

<a href="#" class="maClasse maClasseBtn1">Un lien avec image en fond !!</a>