Technique CSS, Sprite et feuille de styles

Il s'agit d'une technique qui rappellera des souvenirs aux utilisateurs d'amiga ou encore de TI 99 4/A.

Cela consiste à regrouper des images en une seule, puis d'utiliser CSS pour les découper et positionner. Concrètement cela a pour avantage de diminuer le nombre de fichiers à transférer. D'un autre côté le fichier regroupant les images sera possiblement plus lourd que la somme des images séparées. Cela n'a pas trop d'importance pour 2 raisons.

D'abord parce que charger un fichier à la place de 15 est plus rapide au final. Votre serveur n'aura plus à gérer des paquets de requêtes devenues inutiles. D'autre part, l'image sera mise en cache, donc pas d'inquiétude.

Autre avantage pour les rollover. Les images étant toutes présentes dans le même fichier, vous supprimez d'un coup les temps de latence a l'affichage et évitez d'avoir à recourir a un tas d'astuces en javascript pour précharger ces images.

En général, on n'utilise pas cette technique pour toutes les images, mais principalement pour des éléments en général de petite taille. Amazon utilise cette technique, ainsi que Facebook, etc.

Voici un des fichiers délivrés par Facebook :

Sprite CSS et image

Comme vous pouvez le constater, l'image est verticale. D'après des tests, c'est plus efficace qu'une image horizontale.

N'hésitez pas à regrouper des images de même couleur, c'est encore mieux, car le nombre de couleurs influe sur la taille de l'image finale. D'autre part évitez des trop grand placards, genre 1000px sur 3000 px. Le navigateur aurait du mal à gérer une si grande image. En plus, pensez aux mobiles qui ne disposent pas beaucoup de mémoire ni de puissance.

Mise en place d'un sprite CSS

C'est relativement simple, puisqu'il existe des outils gratuits et online qui vont vous mâcher le travail en regroupant les images et en générant le CSS. Vous pouvez bien sur le faire manuellement ;)

Le CSS ressemblera à ceci :

.mon image{
background: url(img/csssprite.png) 0 -100px no-repeat;
}

Sources / Pour aller plus loin

Ressource Sprite CSS

Une question ? Venez la poser sur notre forum Web Analytics et performance web !

A propos de l'auteur

Jacques Terrier

Jacques Terrier AKA Cobolian : Premier site en 98, puis quelques belles références à son palmarès. Fort de son background technique et marketing, Jacques est consultant e-commerce.

Newsletter Marketing