et 
Ces deux images ont les dimmensions suivantes : 16 pixels de large / 16 pixels de haut.
À présent voyons voir comment optimiser le chargement des images et le survol sur liens.
En fait c'est extrèmement simple.
Prenons l'exemple d'un survol sur image.
Ici nous avons 2 images : et
Ces deux images ont les dimmensions suivantes : 16 pixels de large / 16 pixels de haut.
Nous allons créer une image de 16 pixels de large / 40 pixels de haut.
"Pourquoi 40 pixels de haut ? 16*2=32 ..."
Parce que nous gardons une "marge" autour des icônes. En effet il est à noter que les icônes actuels sont centrés en hauteur par rapport au texte. Ici nous ajoutons donc 2 pixels au dessus et en dessous de chaque icône.
2px + 16px + 2px + 2px + 16px + 2px = 40px
Et nous collons nos deux images sur cette nouvelle image. nous obtenons : 
À présent nous plaçons cette nouvelle image à la place de l'ancienne.
On obtient :
Comme vous pouvez le voir, du fait de l'alignement vertical en CSS posé à 50%, notre image n'est pas correctement positionnée.
Il suffit donc de modifier celà en spécifiant une position verticale à : 0
ici vous constatez, qu'il n'y a aucun effet de survol. En effet l'image qui doit normalement s'afficher et juste en dessous de celle que vous voyez. Donc pour afficher l'effet de survol, il suffit de jouer sur le positionnement de l'image de fond, lors d'un survol. Donc il suffit d'appliquer une position verticale à : 20px
Nous avons notre survol, avec une seule image et une seule requête seveur :)
Vous constatez ici, qu'on a mit le positionnement vertical à 20px et la répétition à repeat-y. C'est normal, celà nous permet de faire varier l'image vers le haut ou vers le bas. Sauf que ici, en toute logique on aurait dû faire remonter l'image et donc mettre un -20px. Comme la répétition est à repeat-y (répétition infinie verticale), l'image à fait ... 'un tour' :p.