Blog inspirant depuis 2008
  • Pin It

CSS Sprites – Améliorer la rapidité de votre site web

css sprite

L’une des expériences les plus frustrantes pour un usager web est d’attendre pour le chargement d’une page web qui a mal été optimisée. Dans la plupart des cas, les utilisateurs de votre site web ou vos clients potentiels seront tentés de cliquer sur le bouton « précédent » de leur navigateur et vous risquerez alors de perdre quelques opportunités d’affaires.

Afin d’améliorer les performances de votre site web, l’utilisation de la technique du CSS Sprite peut s’avérer un bon moyen de diminuer le nombre de requêtes HTTP améliorant ainsi le temps de chargement de vos pages Internet.

« L’article suivant a été publié le 3 juillet dernier sur le site web de Sixrevisions.com ».

Qu’est-ce qu’un CSS Sprite?

Sauver de la bande passante et améliorer la rapidité de votre site web avec les CSS Sprite

Un CSS sprite, c’est plusieurs images réunis en une seule grande image afin de diminuer le nombre de requêtes HTTP et d’améliorer le poids d’une page web.

Connaissez-vous la technique CSS qui sert à présenter deux états d’un bouton (On/Off ou état normal et état rollover) dans une seule image en utilisant la propriété CSS background-position ? Eh bien cette technique est en fait un CSS sprite.

Des Générateurs de CSS Sprites

Il existe des sites web servant à faciliter la création d’un CSS sprite. Le principe est simple; vous fournissez vos images au site en question, et celui-ci vous génèrera une grande image, le code à implémenter dans votre CSS ainsi que le code à insérer dans votre page web.

Voici quelques sites offrant ce service :

Comment créer votre image pour la technique du CSS Sprite

N.B. – J’ai eu de la difficulté à reproduire l’exemple suivant. Je vous conseil d’utiliser les sites web mentionnés plus haut pour créer un CSS sprite. Également à noter, la 1ière personne du singulier utilisée dans les paragraphes suivants ne font pas référence à l’auteur de MaRevueWeb mais bien à l’auteur de l’article paru sur SixRevisions.com.

En utilisant Photoshop, j’ai créé un document comprenant 5 logos et je les ai divisés en espace de 100 pixels chacun. J’ai sauvegardé l’image et je l’ai appelé logos.jpg.

Pour positionner l’affichage des logos, nous utiliserons la propriété background-position.

Utiliser la technique du CSS Sprite

Pour afficher le second logo, le seul ajustement nécessaire dans le code CSS se fera au niveau de l’axe des x. Nous lui soustrairons 100 pixels.

Utiliser la technique du CSS Sprite

CSS pour l’utilisation du CSS sprite

#logos {height: 64px; margin: 0; padding: 0; position: relative;}

#logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#logos a {height: 64px; display: block;}
// Premier logo
#logos li a.jaz {background-position: 0 0}
// Deuxième logo
#logos li a.iberotel {background-position: 0 -100px;}
// Troisième logo
#logos li a.solymar {background-position: 0 -200px;}
// Quatrième logo
#logos li a.travcotels {background-position: 0 -300px;}
// Cinquième logo
#logos li a.intercity {background-position: 0 -400px;}

Le résultat de l’utilisation du CSS Sprite

The Results

Dans notre exemple, nous avons réduit le poids des fichiers de 52kb à 22kb et le nombre de requêtes de 5 à 1.

Croyez-vous que le temps de chargement de votre site web est optimal? Sinon, peut-être pourriez-vous y appliquer cette technique?

6 commentaires

  • Willy, de wabeo | 2010/07/16

    Félicitation pour cet article très complet sur la technique des sprites css, une optimisation devenue quasi indispensable pour réduire le temps de chargement des pages.

    Cependant les sprites ne sont pas à conseiller dans tous les cas :
    – très efficace pour les petites images, la technique est moins valables pour les grandes images
    – si on veux animer ces images (avec du jquery par exemple) il faut faire attention de là où on les place dans notre sprites (au risque de faire apparaitre des images sans rapport)
    – si on utilise du png (pour garder de la transparence par exemple) et que l'on fait appel à trop de couleurs dans notre sprite, cela reduit sa qualité
    -si on utilise de vraies images au lien de background-images, cela permet de placer des mots-clefs dans les balise « alt »

  • Louis-Philippe Dea | 2010/07/16

    Merci Willy pour ces précitions concernant les sprites. Je commence tranquillement à utiliser cette technique dans les sites web que j'intègre et je n'était pas au courant de ces désavantages.

    Comme tu l'as mentionné, je crois que la technique est bonne pour certaines utilisations particulières dont l'affichage de petites images.

  • Geoffrey Bourseau | 2010/07/16

    Super article merci!

    J'avais fait il y a quelques mois un petit récapitulatif d'une dizaine d'astuces pour optimiser son site web, pour aller encore un peu plus loin que les sprites.
    http://www.bgstudio.be/blog/10-astuces-pour-opt… pour ceux que ca intéresse 🙂

  • Louis-Philippe Dea | 2010/07/17

    Excellent ton article. Merci de nous l'avoir partagé!

  • Test rapidité site web | 2011/03/11

    Excellent article !

    Et pour vérifier les résultats, je vous conseille un outil qui lance des firefox dans le cloud :
    http://www.monitoring-transactionnel.com/performance

    Si l’on test sur marevueweb voila le resulat :
    http://www.monitoring-transactionnel.com/performance/8c48523af729552527cdfabe285a8acd2ab37159

  • Louis-Philippe Dea | 2011/04/05

    Merci pour ton commentaire. Il s’agit d’un outil qui semble très bien construit. Personnellement, avant, j’utilisais le plugin YSlow. Je vais probablement m’attarder un peu plus au site web que tu as recommandé!

Laisser un commentaire