Les sprites CSS

L’utilisation de sprites CSS dans vos sites permet de diminuer considérablement le nombre de requêtes vers votre serveur et d’optimiser la bande passante. Découvrez à travers un exemple tout simple le fonctionnement des sprites et comment intégrer cette technique sur votre prochain site.

Un « sprite »: qu’est-ce que c’est ?

« Un sprite est une image rectangulaire dont on fait varier la transparence à certains endroits au moyen du canal alpha afin d’obtenir une silhouette détaillée qui se découpe sur le fond de l’écran, au lieu d’un rectangle. » [Source: Wikipédia]

Les sprites: comment ça marchent ?

Imaginons que la page d’accueil de votre site utilise 20 images différentes, l’affichage de celle-ci va donc provoquer 20 requêtes à votre serveur.  L’idée, pour diminuer ce nombre de requêtes, est de regrouper toutes les images dans une seule grosse image et d’utiliser ensuite une feuille de style CSS pour contrôler avec précision, au pixel près, l’affichage de telle ou telle partie de cette grosse image.

Et comme un exemple vaut toujours mieux qu’un long discours, voici par le fichier utilisé par Skype pour afficher les drapeaux des différents pays. Tous les drapeaux sont regroupés sur un seul fichier, et avec quelques lignes de CSS, il est très facile de cibler le drapeau que l’on souhaite afficher.

Voici un autre exemple, Google n’utilise qu’une seule image sur sa page de résultats:

Comment mettre en place les sprites sur mon site ?

Vous l’avez donc compris, l’utilisation de cette technique permet de diminuer drastiquement le nombre de requêtes vers votre serveur, surtout si vous utilisez de nombreuses petites images. Nous allons donc voir comment mettre en place les sprites à travers un exemple tout simple.

Pour ceux qui seraient impatients de voir le résultal final, il est ici.

1ère étape: la création du tableau de sprites

Comme nous l’avons vu ci-dessus, il s’agit de regrouper l’ensemble des images de notre site sur une seule grosse image. Dans mon exemple, il s’agit de jouer avec la transparence de 3 icônes pour réseaux sociaux. Les 3 icônes sur la ligne du haut seront utilisées lorsque la souris passera sur l’image que nous auront désignée. Les 3 icônes du bas seront utilisées lorsque la souris sortira de la zone en question. Lors de la création de cette image, il faut aussi bien noter la largeur et la hauteur de chaque sprite, ainsi que la position du bord haut-gauche, la position 0,0 étant tout en haut à gauche de l’image. Si par exemple je souhaite afficher le sprite transparent du flux RSS (celui en bas à droite) , je dois retenir qu’il a un décalage vertical de 90px, un décalage horizontal de 150px, et une taille de 75×90px.

Le résultat final est donc:

2ème étape: mise en place du HTML

Le code HTML pour notre exemple est très simple, il s’agit d’une liste comportant un lien pour chaque élément. L’attribut href de la balise <a> n’est pas renseigné, vous pouvez bien évidemment y ajouter l’adresse que vous désirez.

3ème étape: mise en place du CSS

Pour le style, on affiche la liste en ligne et on supprime la puce par défaut sur la gauche. On défini ensuite une hauteur et une largeur fixe pour toutes les ancres ainsi qu’un seul et même fichier comme image de fond. Pour finir on positionne nos sprites grâce à l’attribut background-position, la première valeur représentant le décalage horizontal, la seconde valeur le décalage vertical.

ul {
    list-style-type:none;
}
li {
    float:left;
    margin:0 20px;
}
a {
    width:75px;
    height:90px;
    display:block;
    background-image:url('sprites.jpg');
}
#facebook {
    background-position: 0 -90px;
}
#facebook:hover {
    background-position: 0 0;
}
#twitter {
    background-position: -75px -90px;
}
#twitter:hover {
    background-position: -75px 0;
}
#rss {
    background-position: -150px -90px;
}
#rss:hover {
    background-position: -150px 0;
}

Conclusion

La mise en place de sprites est une technique simple et efficace qu’il est bon de savoir maîtriser. Le code que je vous propose ci-dessus a été testé avec succès sur la grosse majorité des navigateurs: Internet Explorer 6, 7 et 8, Firefox 2 et 3, Opera 10,  Chrome 3 et Safari 4. Vous pouvez aussi consulter le billet sur l’utilisation d’un CDN pour plus d’informations sur l’optimisation de votre site. Si vous avez des questions ou suggestions, n’hésitez pas à les poster dans les commentaires ci-dessous.

No related posts.

La liste des entrées complémentaires est établie par le module d’extension YARPP.

Tags : CSS, Optimisation, sprite

Vous pouvez laisser un commentaire, ou faire un rétrolien depuis votre site.