optimiser le chargement de vos pages grâce au sprites CSS

Pour optimiser le chargement de vos pages Web, une première approche serait de regrouper les images que vous utilisez en une seule.

Cette image doit être chargée via une feuille de style CSS puis par la suite, il faudra jouer sur plusieurs propriétés comme background-position pour utiliser la bonne partie de l'image.

Essayez de regrouper vos images selon l'utilisation dans la page :

• les icônes et picto dans une.


• les images de fond dans une autre.

Par exemple, une feuille de style utilisant cette méthode pourrait ressembler à cela :

.sprite{
   background-image:url(sprites.jpg);
}

.lien {background-position: 0 -50px;}
.logo {background-position: 0 0;}

Les propriétés de position ne font simplement que positionner l'image chargée par la classe .sprite.
Ici, la partie de l'image servant comme picto pour les liens se situant à 50 pixels du haut de l'image.

Au final, vous économiserez de la bande passante et gagnerez en vitesse de chargement.