Utiliser les Sprites CSS pour diminuer le temps de chargement de vos pages

Vous qui êtes constamment à la recherche d'astuces pour améliorer le temps de chargement des pages de vos sites, il existe une solution plutôt futée que je viens de découvrir: les sprites CSS.

En effet, il faut savoir que quand vous ouvrez une page, votre navigateur charge chaque les images autant de fois qu'elles sont présentes dans le code HTML. Grâce à ce nouveau procédé, toutes vos images sont chargées en même temps, et en une seule fois via le CSS.

Alors, concrêtement, que sont les sprites? Pour faire simple, il s'agit d'une seule et même image (voir ci-dessus pour google) qui regroupe toutes vos images imbriquées les unes à coté des autres. A l'aide du CSS et nottamment de l'attribut "background-position", vous allez spécifier des coordonnées et des dimensions précises pour faire apparaître l'image souhaitée parmis celle du groupe et ainsi éviter des chargements superflus. Malin non?

Vous aussi vous voulez essayer? Ce tutoriel très bien fait vous donnera tous les conseils necessaires. Bonne chance!