Un chargement de vos pages Web plus rapide avec des sprites CSS
Les sprites CSS permettent de réunir plusieurs images en une seule, en particulier des icônes. Une seule image à charger permet de diminuer le nombre de requêtes faites au serveur. Selon votre hébergeur il y a un nombre maximum de requêtes simultanées et la méthode des sprites CSS permet d'éviter des bouchons dus à cette limite qui affecte la durée de chargement des pages web.
Le fait de regrouper des images permet également de réduire le poids global des images, et donc encore une fois accélérer l'affichage de vos pages Web.
Les sprites CSS c'est pas bien compliquer à mettre en place ! Pour en réaliser il faut utiliser la propriété "background-position". Aux premiers abords ce n'est pas toujours évident de réaliser des sprites CSS c'est pour cela que je vous conseille d'utiliser ce générateur en ligne.
Son utilisation est simple, il vous faudra cependant un minimum de connaissance en CSS :
- enregistrez vos images dans une archive zip
- transférez transférez cette archive
- cliquez sur Créez le Sprite et le CSS
- télécharger le Sprite et récupérez le code CSS qu'il vous faudra intégrer à vos pages
Quand je dois générer des sprites j'utilise ce script qui me fait gagner pas mal de temps.
Crédit photo : Twm