Les sprites CSS sur le Web moderne : quand les utiliser et comment les tester

Les sprites CSS étaient autrefois une solution courante pour les pages qui chargeaient des dizaines de petites images. Au lieu de demander chaque icône séparément, un site pouvait charger une seule image regroupant plusieurs icônes et en afficher de petites zones avec CSS. La technique fonctionne toujours, mais les navigateurs modernes, la mise en cache, le SVG et les mises en page adaptatives changent les compromis.

La question utile est de savoir si un ensemble d’images gagne à être regroupé dans une seule ressource. Réduire le nombre de requêtes d’images ne suffit pas à prouver qu’une page se charge plus vite.

Ce que fait une planche de sprites

Imaginez une image horizontale contenant quatre icônes de 24 pixels sur 24. Chaque icône occupe une zone de la planche. Une règle CSS fixe les dimensions de l’élément à celles d’une icône, puis décale l’image d’arrière-plan pour faire apparaître la bonne zone dans l’élément.

Par exemple, si l’icône de recherche commence à 48 pixels du bord gauche de la planche :

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../images/ui-sprites.png");
  background-repeat: no-repeat;
}

.icon-search {
  background-position: -48px 0;
}

Cette coordonnée X négative déplace la planche vers la gauche et rend visible l’icône située à X = 48 dans une boîte de 24 pixels de large. Lorsque l’arrière-plan conserve sa taille d’origine, les coordonnées correspondent aux pixels de l’image source. Modifier la disposition de la planche ou son échelle sans adapter le CSS peut faire apparaître la mauvaise icône. Le guide des sprites de MDN  explique cette technique de positionnement.

Le créateur de sprites CSS de Web2Generators facilite les mesures répétitives. Chargez une planche existante au format PNG, JPEG ou WebP, sélectionnez les zones, donnez-leur des noms de classes, puis copiez ou téléchargez le CSS généré. Préparez d’abord l’image regroupant les icônes : l’outil définit des zones dans une planche existante et n’assemble pas des icônes séparées.

Quand une planche de sprites est un choix pertinent

Un sprite peut être utile lorsqu’un site possède déjà un ensemble stable de petites icônes matricielles décoratives, surtout si beaucoup s’affichent ensemble et ont les mêmes besoins de déploiement et de mise en cache. Une planche peut aussi regrouper les différents états d’une même icône dans un seul fichier.

L’intérêt est moindre lorsque les icônes sont mises à jour à des rythmes différents ou nécessitent des durées de mise en cache indépendantes. Des fichiers SVG ou un système de symboles SVG peuvent être plus pratiques pour des formes qui doivent rester nettes à différentes tailles. CSS peut dessiner des décorations simples sans image. Si une image transmet un contenu essentiel, un élément <img> classique avec un texte alternatif adapté convient souvent mieux qu’un arrière-plan CSS.

Le protocole de transport utilisé par le navigateur compte aussi. HTTP/2 et HTTP/3 prennent en charge plusieurs flux de requêtes sur une seule connexion , ce qui réduit une partie du surcoût qui rendait autrefois les nombreuses petites requêtes coûteuses. Une grande planche peut obliger le navigateur à télécharger des icônes que la page n’utilise jamais. La compression peut favoriser une planche regroupée, mais cela dépend des images et du format de fichier. Comparez les deux versions dans les conditions rencontrées par vos utilisateurs.

Définir les zones avec des coordonnées prévisibles

Commencez par un petit ensemble cohérent d’icônes. Déterminez si la planche sera affichée à ses dimensions d’origine ou si vous prévoyez une adaptation aux écrans haute densité. Laissez un espace entre les zones lorsque la mise à l’échelle ou le filtrage risque de mélanger les pixels d’icônes voisines.

Une fois l’image source prête, ouvrez le créateur de sprites CSS. Choisissez Charger une image, sélectionnez une zone et utilisez les valeurs Position et Taille pour des mesures précises. Utilisez Ajouter un sprite pour chaque icône supplémentaire et Renommer pour lui attribuer une classe comme icon-search ou icon-settings.

Dépliez Options, renseignez Chemin de l’image dans le CSS, puis copiez ou téléchargez le CSS. Un chemin relatif comme ../images/ui-sprites.png est résolu à partir de l’URL de la feuille de style. Un chemin commençant par /, comme /assets/ui-sprites.png, est résolu à partir de la racine de l’origine de la feuille de style. Publiez la planche source à l’emplacement choisi et conservez ses dimensions, sauf si vous adaptez aussi le CSS.

Les sélections restent uniquement en mémoire pour la session en cours. Copiez ou téléchargez le CSS avant de recharger la page ou de remplacer la planche. L’export contient les règles CSS, pas l’image ni un projet enregistré que vous pourriez rouvrir dans l’outil.

Adapter une planche 2x de façon cohérente

Pour obtenir une icône de 24 pixels sur 24 plus nette sur un écran dont le rapport de pixels est de 2, vous pouvez préparer l’image à 48 pixels source sur 48 et l’afficher à la moitié de cette taille. Appliquez le même facteur à l’ensemble de l’arrière-plan, aux dimensions de la zone sélectionnée et à ses décalages.

Par exemple, supposons que la planche mesure 192 pixels source sur 48, que l’icône de recherche commence à X = 96, Y = 0 et qu’elle occupe une zone de 48 pixels sur 48 :

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../images/ui-sprites@2x.png");
  background-repeat: no-repeat;
  background-size: 96px 24px;
}

.icon-search {
  background-position: -48px 0;
}

Ici, background-size décrit la taille d’affichage de toute la planche, pas celle d’une icône. Évitez cover ou contain dans cet exemple : ces valeurs adaptent la planche à la boîte de l’icône au lieu de préserver la correspondance prévue des coordonnées. Consultez la référence MDN de background-size .

L’outil exporte les mesures en pixels d’origine : cette mise à l’échelle demande donc une modification manuelle du CSS exporté. Ses commandes Ajuster et 100% ne modifient que l’aperçu dans l’éditeur, pas les dimensions exportées. Vérifiez le résultat avec différents rapports de pixels et niveaux de zoom du navigateur ; une planche 2x ne garantit pas un rendu net à toutes les échelles.

Rendre les icônes accessibles

Une icône décorative ne doit pas provoquer la lecture d’un libellé redondant. Si un bouton porte déjà le texte “Search” (“Rechercher”), son icône peut être masquée aux technologies d’assistance :

<button type="button">
  <span class="icon icon-search" aria-hidden="true"></span>
  Search
</button>

Le texte visible fournit le nom accessible. Si le bouton contient uniquement une icône, donnez un nom pertinent au bouton lui-même :

<button type="button" aria-label="Search">
  <span class="icon icon-search" aria-hidden="true"></span>
</button>

Ces exemples suivent les conseils de la WAI sur les images décoratives  (en anglais) et les noms des boutons  (en anglais). Un nom accessible aide les utilisateurs de lecteurs d’écran, mais il ne fournit pas d’explication visible aux personnes voyantes si l’icône ne se charge pas ou disparaît en mode de couleurs forcées. Privilégiez un texte visible pour les actions importantes et vérifiez le focus et le fonctionnement au clavier, en plus de l’apparence.

Comparer un sprite à des images individuelles

Avant d’adopter une planche, créez deux pages ou composants équivalents : l’un avec des icônes séparées, l’autre avec le sprite. Gardez des images, des tailles d’affichage, une qualité d’image et des ressources de page comparables. Ouvrez ensuite le panneau Réseau du navigateur et relevez les résultats.

Comparez au moins les points suivants :

• Volume d’images transféré : comptez la planche entière, même si la page n’utilise que quelques icônes. Un téléchargement unique n’est pas nécessairement plus léger.
• Nombre de requêtes et protocole : le sprite devrait regrouper les requêtes d’images, mais le bénéfice dépend de la connexion et de la version HTTP.
• Délai d’apparition des icônes : comparez le résultat visible et la chronologie des requêtes, pas seulement le nombre de lignes du panneau Réseau.
• Visites suivantes et mises à jour : vérifiez la réutilisation du cache. Modifier une icône peut imposer le téléchargement de toute la planche mise à jour ; avec des fichiers séparés, les icônes inchangées peuvent rester en cache.
• Écrans étroits et zoom : les icônes doivent rester alignées à côté des libellés qui passent sur plusieurs lignes. Essayez de vrais libellés, y compris des traductions plus longues, et vérifiez que les zones voisines de la planche n’apparaissent pas dans la boîte.

Effectuez des tests avec un cache vide et un cache déjà rempli, en conservant les mêmes réglages de limitation du réseau. Activez l’option Désactiver le cache du navigateur pour les comparaisons sans cache ; désactivez-la pour les tests avec cache, puis chargez la page une fois afin de remplir le cache avant de mesurer un rechargement normal. Répétez chaque test suffisamment de fois pour distinguer une tendance stable des variations du réseau. Notre guide pour examiner les requêtes réseau d’un site dans Chrome, Firefox, Edge et Safari présente les panneaux concernés.

Conservez le sprite si les mesures montrent une amélioration utile et si la planche reste facile à entretenir. Si elle sert surtout à télécharger des images inutilisées ou complique les modifications courantes des icônes, des images individuelles ou du SVG peuvent mieux convenir au projet.

Essayez avec votre propre planche : ouvrez le créateur de sprites CSS, chargez votre image et sélectionnez quelques icônes pour générer leur CSS. Vous pouvez aussi commencer par l’exemple fourni avant de préparer votre propre planche.