Comment faire des sprites en CSS facilement ?

Les sprites permettent de regrouper toutes les images d'interface du site en une seule image, plus rapide à charger que les dizaines d'images qui vous servent dans l'interface même de votre site (logo, flèches suivant/précédent d'un slider jQuery, icones pour les réseaux sociaux, etc...). Lors du chargement du site, le navigateur demandera qu'une seule image, qui permettra d'optimiser la bande passante et donc le temps de chargement du site. Explications

Les avantages des sprites CSS

- Optimisation du temps de chargement du site : vous ne chargez q'une seule image qui en contient plusieurs, on fait moins d'aller-retour avec le serveur.

- Le poids des images : toutes les images d'interface pèsent un peu, alors qu'un fichier sprite qui en contient plusieurs sera toujours moins lourde.

Les inconvénients de faire du sprite CSS

- la phase de préparation est assez complexe (mais je vais vous l'expliquer un peu plus bas)

- les modifications d'un sprite mal pensé devient très fastidieux.

- il faut être à l'aise avec le HTML et le CSS (un minimum)

Mais comment ça fonctionne exactement ?

Le sprite est un fichier image classique, au format jpg ou png (en fonction de si vous avez besoin d'avoir de la transparence ou non). Mais ce qui est important c'est ce qu'il contient, puisqu'on y mettra toutes les images dont vous avez besoin dans votre interface : logos, icones, réseaux sociaux, flèches pour un slider, etc... Le but est de réussir à intégrer tout ça dans un seul fichier comme l'exemple ci-dessous :

La préparation d'un sprite CSS

Pour concevoir un sprite CSS, vous devez analyser votre site web pour savoir de quoi vous aurez besoin : logo sous plusieurs aspects ou tailles ? Flèches ? Icones d'interface ? Réseaux sociaux ? Elements graphiques ? Le plus simple, surtout au début, est de tous les lister et de voir si certains éléments sont très grand (en hauteur ou en largeur), ce qui permettra de définir la largeur ou la hauteur de notre image sprite.png (le nom du fichier n'a pas d'importance).

Le travail en utilisant des grilles

Ce que je préfère quans je créer mes sprites pour mes clients ou pour mon site, est de travailler avec une grille. J'aime bien travailler avec une grille de 50px, c'est à dire des carrés de 50px x 50px :

Cette grille de 50x50 sera également plus facile à utiliser lors de la création du CSS associé.

Le remplissage de votre fichier sprite

Maintenant que vous avez défini les images à intégrer dans votre fichier sprite et que vous avez créer une grille adaptée, il suffit d'y ajouter les images sans qu'elles se touchent et en respectant un espace rectangulaire autour.

Dans cet exemple, en bas se trouvent 2 logos trop proches. Comme les images ou les zones CSS seront forcéments carrées, n'oubliez pas de laisser suffisamment d'espace entre chaque élément.

L'utilisation en CSS de votre fichier sprite

Ca y est, notre fichier est prêt. On y a mis tous les éléments qu'il faut pour notre interface et on aimerait remplacer toutes les images indépendantes par notre sprite.png. Pour cela, il faudra jouer avec les règles CSS. Avant on avait ceci :

<img src="fleche.png" alt="" title="" />

Il faudrait remplacer la balise image par ceci :

<div class="fleche"></div>

Et rajouter en CSS :

.fleche{
width:50px;
height:50px;
background:url(sprite.png);
background-position:-200px -150px;
}


Pour l'explication, on remplace l'image par une balise DIV que l'on appelera par une classe 'fleche'. Coté CSS, on définit la taille de cette boite en hauteur et en largeur en fonction de la taille de l'image que l'on avait avant (qui doit se trouver dans votre fichier sprite). On indique ensuite que l'on utilisera une image d'arrière-plan qui ne nomme sprite.png en spécifiant le background-position pour déplacer l'image d'arrière plan au bon endroit en partant du point en haut à gauche, le point de référence.

Maintenant il ne reste plus qu'à reproduire la même démarche pour chacune des images qui composent votre page/site... Et ça peut être long, mais les résultats seront meilleurs pour les utilisateurs, pour le temps de chargement de votre site et donc, indirectement, pour votre référencement naturel.

Si vous avez besoin d'exemples, recherchez 'sprite css' sur Google Images pour voir des centaines d'autres exemples (Google, Facebook, etc...)