Créer des Sprites CSS… Une idée pour alléger le chargement de vos pages web!
A travers de récentes recherches sur les possibilités de tester et d’améliorer les temps de chargement de mes pages web, j’ai découvert une présentation intéressante sur la création de Sprite CSS.
En effet cette technique consiste à regrouper plusieurs images d’interfaces à l’intérieur d’un Sprite comme présenté dans l’exemple ci-dessous réalisé par Google :
Il suffit ensuite d’utiliser les propriétés CSS de « background-img » et « background-position » pour pouvoir afficher la partie souhaité de l’image.
Les images chargées à travers CSS ne sont chargés qu’une fois alors que les images insérées en HTML sont chargées autant de fois que nécessaire. L’utilisation de Sprite permet donc de réduire considérablement le temps de chargement des interfaces car c’est ici leur principale utilité.
Vous trouverez l’article à l’adresse http://cssglobe.developpez.com/tutoriels/css/ameliorer-temps-chargement-images/#LI.
Il permet de bien se rappeler comment son calculées les coordonnées de position des images de fond CSS et sert de guide pour ne pas rater une étape dans la mise en place des Sprites.
Bonjour à tous,
Je recherche une perle rare… un développeur JavaScript maitrisant Sprites CSS. Si vous êtes cette personne ou si vous la connaissez n’hésitez pas à me contacter !
Merci à tous