Spriters
Il y a quelque temps, je suis tombé sur une étude sur la livraison non optimisée des ressources web. Une interface classique charge une image par élément — une requête HTTP par icône, bouton ou drapeau. Steve Souders a chiffré le coût dans High Performance Web Sites (ACM Queue, 2008) : réduire le nombre de requêtes HTTP est le levier front-end le plus impactant, chaque aller-retour supplémentaire ajoutant des dizaines de millisecondes de latence qui s’accumulent sur des dizaines de petites images.
La solution est empruntée aux jeux vidéo classiques, où la mémoire était trop limitée pour stocker chaque frame séparément — les artistes regroupaient les sprites dans une seule feuille de texture et utilisaient des coordonnées pour afficher la bonne pièce. Les navigateurs web font la même chose : une image de sprite, une requête, une entrée en cache, et un fichier CSS qui associe chaque nom à sa position dans la feuille. Le fichier combiné est aussi plus léger que la somme de ses parties.
spriters (Sprite-RS) est un générateur de sprites CSS rapide écrit en Rust — une réimplémentation moderne et multi-threadée de Glue qui ajoute le support des sources SVG, la sortie WebP/AVIF et une intégration CI de premier ordre.
spriters automatise toute la chaîne : il trouve vos images sources, les empaquète de façon optimale et génère la feuille de sprites ainsi que la feuille de style (CSS, LESS, SCSS…) pour afficher chaque image par son nom. Il fonctionne aussi bien pour les interfaces web que pour les pipelines d’assets de jeux vidéo.
Pourquoi spriters ?
- Plus rapide — décodage, recadrage, redimensionnement et génération en parallèle via Rayon
- Entrées modernes — fichiers SVG rastérisés à la résolution correcte
- Sorties modernes — WebP/AVIF, types TypeScript (
--dts), safelist Tailwind (--tailwind), propriétés CSS personnalisées (--css-vars) - Prêt pour la CI — sortie reproductible octet par octet ;
--checkretourne une erreur si les sprites sont obsolètes ; les builds incrémentaux ignorent les entrées inchangées - Compatible Glue — remplacement direct avec un surensemble des fonctionnalités de Glue
Démarrage rapide
cargo install spriters
# Générer le sprite + CSS
spriters icons/ dist/
# Sprite WebP retina (2× et 1×) avec types TypeScript
spriters icons/ dist/ --retina --format=webp --dts
# Assertion CI — échoue si les sprites ne sont pas à jour
spriters icons/ dist/ --check