Image sprites CSS
Optional Advanced vient de couvrir !important — un drapeau d’override rare. Cette session est un autre sujet optionnel : les image sprites. Vous les croisez dans d’anciennes feuilles de styles et certains jeux d’icônes legacy. L’idée est simple : un fichier image, plusieurs icônes, et background-position choisit quelle tuile apparaît dans une petite fenêtre.
Réponse directe
Un image sprite CSS est une seule image-feuille qui range plusieurs icônes (ou états de bouton) côte à côte. Chaque élément d’UI reçoit une largeur et une hauteur fixes, la même background-image, et un background-position qui fait glisser la feuille jusqu’à ce que la bonne tuile remplisse la boîte. Les sprites réduisaient le nombre de requêtes à l’époque du « un fichier par icône ». Pour du travail neuf, préférez les icônes SVG, le SVG en ligne, ou un petit système d’icônes — gardez les sprites quand vous maintenez une feuille existante ou devez coller à un design legacy.
Pourquoi les sprites existaient
Autrefois, chaque icône signifiait souvent un aller-retour HTTP de plus. Regrouper vingt petits PNG dans une feuille voulait dire un seul téléchargement et une seule entrée de cache. Les navigateurs peignaient ensuite différentes « fenêtres » sur cette feuille avec le CSS. HTTP/2 et le bundling moderne ont allégé cette douleur, et les icônes vectorielles sont en général plus nettes — mais le schéma de positionnement reste une litératie utile quand vous ouvrez du vieux CSS.
Les trois pièces
Il vous faut :
- Une feuille — p. ex.
icons.pngavec des tuiles en rangée ou en grille - Une boîte —
widthetheightcalés sur une tuile (souvent avecdisplay: inline-blockou un lien en bloc) - Un décalage —
background-positionpour placer la bonne tuile sous la boîte
background-repeat: no-repeatempêche la feuille de se répéter. Vous ne chargez pas un fichier par icône ; vous découpez par position.
Première tuile sur une feuille partagée
Imaginez une feuille où chaque icône fait 32×32 pixels. La première est en haut à gauche. La boîte de l’élément fait 32×32, et l’arrière-plan commence à 0 0 :
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}
La boîte agit comme une fenêtre d’affichage. Seuls les 32×32 en haut à gauche de icons.png sont visibles. Le reste de la feuille est là — simplement découpé par la taille de l’élément.
Deuxième icône : faire glisser la feuille
Si l’icône suivante commence 32px plus à droite, déplacez l’arrière-plan de 32px vers la gauche (X négatif). Même image, même taille de boîte, autre fenêtre :
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}
.icon-search {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: -32px 0;
}
Un X négatif tire la feuille vers la gauche pour que la deuxième tuile remplisse la fenêtre. Une deuxième rangée d’icônes change aussi le Y (par exemple -32px -32px). Mesurez sur votre feuille réelle — ne devinez pas les décalages de mémoire.
Hover depuis une autre tuile
Les jeux de boutons placent souvent les états défaut et hover (ou active) sur la même feuille. Sur :hover, ne changez que background-position :
.btn-icon {
display: inline-block;
width: 40px;
height: 40px;
background-image: url("btn-sheet.png");
background-repeat: no-repeat;
background-position: 0 0;
}
.btn-icon:hover {
background-position: -40px 0;
}
Pas de second fichier image — juste un autre découpage. Gardez la taille de la boîte stable pour que le contrôle ne saute pas.
Habitudes calmes pour la feuille
Associez toujours la feuille à une boîte explicite et à no-repeat. Nommez les classes par rôle, pas seulement par calcul de pixels :
.sprite {
display: inline-block;
background-image: url("icons.png");
background-repeat: no-repeat;
}
.sprite--mail {
width: 24px;
height: 24px;
background-position: 0 -48px;
}
.sprite--bell {
width: 24px;
height: 24px;
background-position: -24px -48px;
}
Documentez la grille de tuiles dans un court commentaire (taille de tuile, ordre des rangées) pour que le prochain mainteneur n’ait pas à rétro-ingénierer des nombres magiques.
Sprites d’hier vs icônes d’aujourd’hui
📊 Sprite sheets vs modern icon approaches
| Approach | Best when | Watch out |
|---|---|---|
| CSS image sprite (PNG sheet) | Legacy UI you must keep; one cached sheet already in the project | Raster scales poorly; offsets break if the sheet changes |
| Inline SVG / SVG sprite | Crisp UI icons at any size; easy theming with currentColor |
Slightly more markup or build setup |
| Icon font | Very old stacks that already ship one | Accessibility and ligature quirks; harder to theme than SVG |
| Separate PNG per icon | Rare one-off graphics | Many requests on old HTTP/1 connections |
Real <img> photos |
Content images, galleries, product shots | Not a job for background-position sprites |
Les leçons image gallery et responsive images utilisent de vrais <img> (miniatures flex, object-fit, srcset). Les sprites sont en général du chrome décoratif d’UI en arrière-plan — pas un substitut aux photos de contenu avec un alt significatif.
Préférer les icônes modernes pour une UI neuve
Pour une interface fraîche, commencez par le SVG (en ligne ou un petit système de sprites SVG). Vous gagnez des bords plus nets, des couleurs plus simples, et plus de décalages pixel fragiles. N’allez vers un sprite PNG classique que si le pack de design est déjà une feuille, ou si vous patchiez un CSS qui en dépend déjà.
/* Content photo — use <img>, not a sprite crop */
.hero-photo {
max-width: 100%;
height: auto;
}
/* UI chrome — sprite OK only if the sheet already exists */
.toolbar .icon-save {
width: 16px;
height: 16px;
background-image: url("legacy-toolbar.png");
background-repeat: no-repeat;
background-position: -64px 0;
}
À vous d’essayer
- Esquissez une rangée de 3 icônes sur papier (ou ouvrez un vrai sprite). Notez la largeur de tuile (p. ex. 32px).
- Créez
.icon-aavecbackground-position: 0 0et une boîte assortie. - Ajoutez
.icon-bavec-32px 0(ou le vrai second décalage). - Ajoutez une règle hover qui passe à une troisième tuile sans changer width/height.
- Écrivez une phrase en commentaire : pourquoi cette feuille existe encore (legacy) ou pourquoi vous choisiriez le SVG la prochaine fois.
Erreurs fréquentes
- Mettre des photos de contenu dans un sprite et perdre un
alt/ une sémantique correcte - Oublier width et height : toute la feuille s’affiche, ou rien ne se découpe proprement
- Utiliser des décalages positifs alors qu’il fallait faire glisser la feuille dans l’autre sens
- Laisser
background-repeatactif : les tuiles se dupliquent dans la boîte - Construire une app neuve sur des sprites PNG par défaut au lieu du SVG
- Copier des décalages d’un tutoriel sans mesurer votre feuille
Résumé
- Un sprite est une feuille ;
background-positionchoisit quelle tuile remplit une boîte fixe - Historiquement, cela réduisait les requêtes HTTP pour plein de petites icônes
- Gardez
no-repeat, des tailles stables et des rôles nommés ; documentez la grille - Préférez le SVG (ou équivalent) pour une UI neuve ; gardez les sprites pour les feuilles legacy
- Les images de contenu restent de vrais
<img>— galeries et images responsives sont un autre métier - Optional Advanced continue ensuite avec les multi-colonnes (
multi-column)
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut