Définition des sprites et utilisation
Un sprite d’images correspond à une collection d’images rassemblées en une seule grande image.
L’idée derrière l’utilisation de sprites est de réduire le nombre de requêtes serveur.
En effet, en cas d’images séparées, une requête va être envoyée au serveur pour récupérer chaque image présente dans une page web pour les afficher. Dans le cas d’une page contenant de nombreuses images, cela peut diminuer sensiblement la vitesse d’affichage de la page.
En utilisant des sprites, une seule requête sera envoyée au serveur et cela optimisera les performances de votre site.
Exemple d’utilisation de sprites CSS
Imaginions que nous voulions afficher des liens ramenant vers nos pages sociales sur notre site. Pour cela, nous allons utiliser les logos des différents réseaux sociaux en tant que liens.
Plutôt que d’enregistrer les logos des réseaux sociaux qui nous intéressent séparément, on va tous les enregistrer côte-à-côte, sur la même image, comme ceci :
On place ensuite notre image dans le même dossier que nos fichiers HTML et CSS.
Ensuite, nous allons simplement créer nos liens en HTML et leur appliquer la propriété background afin d’y ajouter notre image cliquable.
L’idée va alors être de ne récupérer que le logo qui nous intéresse dans notre sprite d’image pour chaque lien et nous allons évidemment faire cela en CSS.
Commencez donc par vous munir d’une image contenant différents logos de réseaux sociaux, puis renommez la « logos-sociaux.png » par exemple afin que nous travaillions tous avec les mêmes bases.
Ensuite, nous allons créer nos liens en HTML en donnant un id à chaque lien afin de pouvoir ensuite le cibler précisément en CSS.
Pour notre exemple, nous n’allons créer des liens que vers les réseaux sociaux Facebook, Twitter et LinkedIn.
Finalement, nous allons utiliser le CSS pour mettre seulement le bon « bout » d’image en fond de chaque lien.
Pour cela, la solution la plus simple va être de déclarer nos liens comme des éléments block afin de pouvoir leur donner une taille en pixels puis de positionner l’image de fond.
Ici, je sais que mes petits logos ont une taille d’environ 50*50 pixels. Je donne donc la même taille à tous mes liens afin de ne récupérer qu’un bout de 50*50 pixels de notre sprite CSS à chaque fois.
J’utilise également un positionnement absolu pour pouvoir par la suite séparer les images de fond les unes des autres.
Ensuite, nous utilisons la propriété background pour insérer notre image de fond et précisons deux coordonnées qui vont correspondre au déplacement de l’image, c’est-à-dire à partir d’où elle va commencer à s’afficher.
Par exemple, pour afficher le logo de Twitter, je sais qu’il faut se déplacer de 50px vers la droite sur notre image, ou encore faire bouger notre image de 50px vers la gauche pour la faire « démarrer » à 50px de son bord gauche. J’utilise donc la valeur -50px qui va me faire commencer à 50px du début « théorique » de mon image.
La deuxième valeur correspond au déplacement vertical. Notre logo Twitter est sur la première ligne, donc à 0px du haut de notre image. Je précise donc 0px. Pour le logo LinkedIn, en revanche, je précise -50px pour décaler mon image de 50px vers le haut et donc commencer 50px plus bas.
Au final, voici le résultat :
