Comment utiliser les sprites CSS

Récemment j’ai créé un nouveau site internet et j’avais pour objectif de le rendre le plus rapide possible. Une solution à ce problème est d’utiliser les sprites CSS qui permettent de diminuer le nombre d’images et de requêtes.
Le concept est simple, plutôt que d’utiliser plusieurs fichiers pour gérer des images, on réunit toutes nos images, les unes à côté des autres, dans un seul et unique fichier. Ensuite on utilise la propriété background-position pour afficher seulement une partie de notre grosse image (le sprite).

La plupart des gros sites utilisent ce concept pour des raisons d’optimisations, voici quelques exemples provenant de google, facebook et youtube :

Voici le tutoriel vidéo suivi de quelques explications supplémentaires, suivi du code utilisé :

En résumé voici les idées essentielles de ce tutoriel :

• Ne pas négliger l’image et être le plus précis possible. S’il y a des décalages de quelques pixels dans l’image, ça se répercutera sur votre site. Pour cela vous pouvez utiliser des guides(comme ça) dans photoshop ou the Gimp (accessible en affichant les règles).
• On appelle également les sprites des portes coulissantes. Ce nom résume bien le concept, ce n’est qu’une question de math et de décalage (c’est d’ailleurs pour cela que les valeurs sont négatives).
• Les sprites permettent d’avoir un site plus rapide et d’éviter le phénomène de scintillement, car une seule image est utilisé.
• De manière générale une image sprite pèsera moins que la somme de l’ensemble des images prises à part (les méta-données n’étant pas répétés).
• N’oubliez pas de mettre un id sur chaque élément distinct du menu. Vous pouvez faire plus simple en créant un sprite avec 2 images : un background normal et un background au survol puis en affichant le texte par-dessus (« effet bouton web 2.0 »).
• N’oubliez d’adapter le code CSS avec votre sprite, dans la vidéo j’avais des images de 32×32 px mais ce n’est pas toujours le cas !! (j’anticipe les problèmes via les commentaires)

Voici les codes utilisés dans la vidéo ainsi que sur la page de démonstration :

Le menu en HTML :

<ul class="menu">
	<li><a href="#" title="Test 1" id="yt"><span>Texte 1</span></a></li>
	<li><a href="#" title="Test 2" id="rss"><span>Texte 2</span></a></li>
	<li><a href="#" title="Test 3" id="fb"><span>Texte 3</span></a></li>
	<li><a href="#" title="Test 4" id="tw"><span>Texte 4</span></a></li>
</ul>

Le code CSS qui va avec :

.menu{width:248px; margin:auto; list-style:none;}
	.menu li{float:left; margin:0px 30px 0 0;}
	.menu a{text-indent:-5999px;}
	.menu span{display:block; width:32px; height:32px;} 
	
	.menu #yt span {background:url('sprite-tuto.png') 0 0 no-repeat;}
	.menu #yt span:hover {background:url('sprite-tuto.png') 0 -32px no-repeat;}
	.menu #rss span {background:url('sprite-tuto.png') -32px 0 no-repeat;}
	.menu #rss span:hover {background:url('sprite-tuto.png') -32px -32px no-repeat;}
	.menu #fb span {background:url('sprite-tuto.png') -64px 0 no-repeat;}
	.menu #fb span:hover {background:url('sprite-tuto.png') -64px -32px no-repeat;}
	.menu #tw span {background:url('sprite-tuto.png') -96px 0 no-repeat;}
	.menu #tw span:hover {background:url('sprite-tuto.png') -96px -32px no-repeat;

N’hésitez pas à poser des questions, mais n’oubliez pas de faire une petite recherche sur Google avant 🙂 et puis vous pouvez rejoindre la page facebook ça me fera plaisir !

(Image à la une : photomontage à partir du sprite CSS des emoji)