Optimisez le chargement de vos pages grâce aux CSS Sprites

articles & tutoriels

Optimisez le chargement de vos pages grâce aux CSS Sprites

Votre site utilise de nombreuses icônes, puces, et boutons personnalisés ? Plutôt que d'utiliser un fichier image pour chacun de ces éléments graphiques, rassemblez toutes ces images les unes à côté des autres dans un fichier unique. L'idée est de charger le moins de fichiers possibles. Le nombre de requêtes HTTP GET sera alors réduit, de même que le poids de vos images. Vos pages se chargeront plus vite. C'est la raison pour laquelle les plus grands sites les utilisent :

Les CSS sprites sont aussi connus sous le nom de portes coulissantes, une technique CSS faisant appel à la propriété background-position. Souvent utilisée pour créer des images qui réagissent au survol de la souris, cette technique permet de se passer totalement de Javascript. Contraitement au Javascript, elles permettent de séparer parfaitement le fond (XHTML) de la forme (CSS, Javascript) tout en étant plus légères.

Les sprites pour les fainéants

Il existe des sites qui facilitent la création de vos CSS sprites. Il suffit de leur fournir vos images pour qu'ils génèrent une seule grande image, et vous donnent le code à utiliser dans votre fichier CSS. Ci-dessous, quelques sites offrant ce service :

Pour les courageux

Certains d'entre vous préfèreront créer leurs CSS sprites eux-mêmes. Rien de tel qu'un exemple pour mieux voir comment s'y prendre. Ci-dessous, mes trois images, chargées par autant de requêtes HTTP et dont le poids cumulé est de 10,0 ko.

Voici l'image obtenue, chargée par une seule et unique requête HTTP et dont le poids a été ramené à 9,63 ko. Dans ce cas, le gain n'est pas très important, il aurait été d'autant plus grand que le nombre d'images aurait été élevé.

Ensuite, définissez la propriété CSS background sur votre élément conteneur et fixez sa taille aux dimensions de vos images :

background: url(images/tags/nouveau_sprite.png);
width: 157px;
height: 59px;

Dans cet exemple, le conteneur est une balise <td>. Pour décaler l'image d'arrière plan, ajoutez à ce conteneur la propriété CSS background-position où la première valeur est le décalage (offset) en pixels sur l'axe horizontal (x), et la deuxième valeur, le décalage sur l'axe vertical (y).

	`background-position: 0 0;` C'est la première image, on ne la décale pas.
	`background-position: 0 -59px;` Pour un décalage vers le haut de la hauteur de l'image
	`background-position: 0 -118px;` Pour un décalage vers le haut de deux fois la hauteur de l'image

Il est possible de travailler avec des images de différentes tailles, mais le calcul des différents offsets sera plus compliqué. Je vous conseille dans ce cas d'utiliser les générateurs cités plus haut dans l'article.

Pour des raisons d'accessibilité, on réservera l'usage des CSS sprites à des images non utiles à la navigation et n'ayant pas de contenu textuel ou sémantique, ce qui devrait être le cas de toutes les images dans un web idéal...

24/03/2011

vincentrobic.com
webmaster

articles & tutoriels