À propos de cet outil
Une feuille de sprites CSS regroupe tout un ensemble de petites images — icônes, glyphes d'interface, emojis — dans un seul fichier image plus grand, puis utilise le background-position de CSS pour afficher exactement la bonne portion pour chaque élément. Avant le multiplexage de HTTP/2, c'était une astuce de performance significative : un navigateur ouvrant une douzaine de connexions distinctes pour une douzaine de minuscules fichiers d'icônes était plus lent que d'ouvrir une seule connexion pour une image combinée, et cet écart peut encore compter sur des connexions HTTP/1.1, avec les limites strictes de nombre de requêtes d'un CDN, ou simplement pour réduire les requêtes de ressources bloquant le rendu sur un réseau lent.
Cet outil construit les deux moitiés pour vous, entièrement dans votre navigateur : déposez vos fichiers d'icônes, choisissez s'ils s'organisent en une seule ligne ou colonne et quel espacement transparent les sépare, puis il les dessine sur un seul canevas, l'encode en PNG (pour préserver la transparence) et génère la règle CSS background-position exacte pour chacune — copiez-la directement dans votre feuille de style. Cela dit, les sprites sont une technique plus ancienne : pour la plupart des nouveaux projets, le SVG en ligne ou une police d'icônes SVG est généralement plus simple à maintenir et s'adapte plus proprement à toute taille, alors considérez ceci comme un outil de plus dans la boîte plutôt que la seule bonne réponse — utilisez-le quand vous avez déjà un ensemble d'icônes matricielles (PNG, pas des vecteurs) et que vous voulez réduire le nombre de requêtes.
Questions fréquentes
Les sprites CSS sont-ils toujours pertinents, ou devrais-je utiliser des icônes SVG à la place ?
Pour la plupart des nouveaux projets, le SVG en ligne ou une police/sprite d'icônes SVG est généralement le choix le plus moderne (net à n'importe quel niveau de zoom, facilement recoloré avec CSS, pas de problèmes d'alignement de grille de pixels fixe). Les sprites CSS restent véritablement utiles pour les ensembles d'icônes photographiques/matricielles qui ne peuvent pas être représentées comme des formes vectorielles, pour les bases de code héritées déjà construites autour de la technique, ou simplement comme un moyen rapide et sans dépendance de regrouper un petit ensemble d'icônes avec un minimum de requêtes HTTP. Utilisez ce qui correspond à vos contraintes réelles — cet outil est là pour quand une feuille de sprites matricielle est le bon outil pour le travail, pas une affirmation que c'est toujours le meilleur choix.
Pourquoi le remplissage final n'est-il pas ajouté après la dernière image ?
Cela garde la taille totale de la feuille aussi petite que possible — le réglage du remplissage existe pour éviter le débordement de texture ENTRE les icônes adjacentes lorsque la feuille est mise à l'échelle/zoomée, ce qui n'est une préoccupation que pour les bords partagés par deux icônes ; le bord extérieur de la feuille elle-même n'a pas d'icône voisine de l'autre côté, donc un espace supplémentaire là ne servirait pas ce but et gaspillerait simplement la taille du fichier, tout en ajoutant une incohérence dans la distance de chaque icône par rapport au bord absolu de la feuille selon sa position.