Accueil > optimisation > css-sprites

{ Optimiser son site grâce au css sprites }

Introduction

Le concept des sprites en CSS est une astuce d'optimisation des plus efficaces qui consiste à placer l'ensemble de vos image sur une seule et de jouer avec la propriété CSS background-position. Sachant que chaque appel à une image représente une requête HTTP.

Mise en place en 5 étapes :

Se rendre sur le site de spriteme

http://spriteme.org/

Glisser déposer le lien dans vos favoris

Comme expliquer sur le site de SpriteMe, enfoncer le clic de la souris sur le lien 'SpriteMe' et glisser le jusqu'à votre barre de navigation personnelle ou jusqu'à votre barre de favoris (selon votre navigateur).

spriteMe

Se rendre sur votre site

Maintenant que votre barre est 'installée' dans vos favoris, rendez-vous sur votre site et cliquez tout simplement sur le lien de SpriteMe. Vous devriez alors voir apparaître ceci :

spriteMe

Spriter vos images !

Vous remarquez alors deux encadrés : Suggested Sprites et Non-Sprited Images. Celui qui nous intéresse est le premier (Suggested Sprites) vous pouvez dès lors avoir un apérçu en passant sur les liens avec la souris. Attention il se peut que vous ayez plusieurs encadrés 'Suggested Sprites', dans ce cas, répéter l'opération pour chaque encadré.

A partir de là, il ne vous reste plus qu'a cliquer sur le lien makeSprite

une fois générée, passez sur le nouveau lien (en principe il n'en reste qu'un) pour voir le résultat. Faîtes un clic-droit et enregister votre image spritée à la racine de votre site.

Exporter les nouveaux css

Votre image téléchargée, cliquez cette fois sur le bouton exportCSSqui va vous afficher vos nouveaux styles CSS ! Copiez les et faires les modifications nécessaires dans votre feuille de style.

Conclusion

Voilà c'est terminé ! Vous venez de sprité votre site et avez économiser des requêtes http.

Pour savoir combien de requêtes vous avec économisé il vous suffit de compter le nombre d'images que vous aviez initialement (donc qui se trouvait dans l'encadré 'Suggested Sprites') et soustrayer 1.

Exemple : J'avais initialement 7 images dans mon encadré 'Suggested Sprites' j'ai donc économisé 6 requêtes http !