CSS Sprites : une technique pour accélérer le chargement des pages Web

• 
• Tweet

• Tweet

C’est quoi ?

Le terme « CSS Sprites » signifie le fait de combiner plusieurs images en une seule et des les récupérer individuellement avec le langage CSS.

Cela veut dire en clair qu’au lieu que le navigateur ait à télécharger quatre images de coin par exemple, vous créez une image qui contient les quatre comme ça le navigateur n’aura qu’une seule image à télécharger.
Ensuite il nous suffit de récupérer individuellement chacune des images en utilisant la propriété « background-position » des feuilles de style CSS.

Pourquoi faire ?

L’utilisation d’images sur les pages d’un site web est à priori un plus, les icônes et boutons font jolis et une belle image de fond fait toujours bonne impression. Cependant il faut savoir que le navigateur fait une requête HTTP pour chacune des images à récupérer.

C’est ce nombre important de requêtes HTTP par page qui est en partie responsable des lenteurs rencontrées sur le chargement d’un site web, en les réduisant nous soulageons notamment les utilisateurs ayant une faible connexion à Internet.

Les navigateurs actuels permettent entre 2 et 4 requêtes HTTP en parallèle vers le même serveur, si la page contient de multiples images elles seront alors téléchargées séquentiellement ce qui ralentit le chargement de la page.

Construire une grille d’images où l’on stockerait tous les boutons, les éléments de navigation, les différents états (initiaux et survolés) associés aux liens, etc. dans un seul fichier image est une des meilleurs solutions pour réduire considérablement ce nombre de requêtes HTTP et donc les problèmes de lenteurs au chargement de vos pages imagées.

Comment faire ?

• Soit nous faisons tout à la main en créant nous même notre grille d’images avec un éditeur d’images et en calculant la position de chaque image dans la grille mais cela est très fastidieux :

• Soit nous utilisons des outils gratuits en ligne qui nous permettent de faire ce travail : nous donnons les images et le site nous donne la grille d’images finale ainsi que le fichier CSS contenant les positions de chaque image ; à ce sujet voici quelques liens qui pourront vous aider :

1. CSS Sprites Generator : http://csssprites.com/
2. Sprite Me : http://spriteme.org/
3. SmartSprites : http://csssprites.org

• Dans tous les cas voici le genre de résultat attendu qui devra être injecté  dans votre page web :

Un exemple de fichier css avant

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Le fichier css après

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Attention

C’est une bonne pratique, quoi qu’il en coûte en terme de temps, mais il est vrai que sur des sites avec peu de trafic cela ne vaut peut-être pas le coup.

Par contre le sites qui ont un trafic important et dont les pages sont affichées des milliers de fois, cela devient très intéressant en terme de gain de temps en chargement, les plus grands sites en terme d’influence utiliserait à peu près tous cette technique (Yahoo, Google, Digg, CNN, Amazon, Apple, etc.).

Liens utiles

http://www.phpied.com/css-sprites-generation-tool/
http://www.alistapart.com/articles/sprites
http://css-tricks.com/css-sprites/

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/