À retenir
- Réduit le nombre de requêtes HTTP (un seul téléchargement au lieu de plusieurs dizaines).
- Utilise principalement les propriétés CSS
background-imageetbackground-position. - Accélère le temps de chargement perçu par l'utilisateur.
Un sprite CSS est une technique web consistant à regrouper plusieurs petites images (comme des icônes ou des logos) dans un seul et même fichier image plus grand. C'est un peu comme une planche de décalcomanies : on télécharge toute la feuille une seule fois, puis on utilise le code CSS pour ne montrer qu'une petite portion précise de l'image à l'endroit voulu sur l'écran.
Étymologie
Le terme sprite est emprunté au monde du jeu vidéo des années 70 et 80, où il désignait un élément graphique mobile se déplaçant devant le décor (comme le personnage de Mario). L'acronyme CSS signifie Cascading Style Sheets (feuilles de style en cascade). L'usage de ce terme en informatique web s'est popularisé dans les années 2000 pour optimiser les performances d'affichage.
Exemples d'usage
- Une barre de navigation affichant dix icônes différentes (accueil, contact, profil, etc.) issues d'une seule image globale.
- L'animation d'un bouton au survol de la souris : au lieu de charger une nouvelle image, le code décale simplement la vue sur la partie de la planche qui contient la version colorée du bouton.
Cas d'usage
Cette méthode intervient principalement en développement web front-end. Elle est utilisée pour optimiser la performance et le référencement (SEO) d'un site en limitant le nombre d'allers-retours entre le navigateur de l'utilisateur et le serveur, ce qui rend l'affichage de la page plus fluide.
Bonnes pratiques
Il est recommandé d'utiliser des outils de génération automatique pour obtenir les coordonnées exactes (en pixels) de chaque icône sur la planche. Veillez à laisser quelques pixels de marge entre les images pour éviter qu'un morceau de l'icône voisine ne dépasse. Aujourd'hui, pour les icônes simples, on préfère parfois le format SVG ou les polices d'icônes, mais le sprite reste imbattable pour des éléments graphiques complexes.
Synonymes
Antonymes
Conseil
Si vous débutez, ne tentez pas de créer la planche d'images à la main dans un logiciel de dessin. Utilisez des "générateurs de sprites CSS" gratuits en ligne : vous glissez vos images, et l'outil vous donne le fichier final ainsi que tout le code CSS nécessaire pour les afficher.
Questions fréquentes
Est-ce toujours indispensable avec le protocole HTTP/2 ?
C'est moins vital car le protocole moderne gère mieux les téléchargements simultanés, mais cela reste une pratique utile pour organiser ses ressources et éviter les micro-latences lors du survol d'éléments.
Quels types d'images peut-on mettre dans un sprite ?
On y met généralement des images fixes et légères comme des icônes, des flèches ou des petits logos au format PNG ou WebP pour gérer la transparence.