Spriters
A while back I came across a study on unoptimized web resource delivery. A typical UI loads one image per element — one HTTP request per icon, button, or flag. Steve Souders quantified the cost in High Performance Web Sites (ACM Queue, 2008): reducing HTTP requests is the single biggest front-end performance win, and each extra round-trip adds tens of milliseconds of latency that compound across dozens of small images.
The fix is borrowed from classic video games, where memory was too scarce to store each frame separately — artists packed sprites into a single texture sheet and used coordinate lookups to display the right piece. Web browsers do the same thing: one sprite image, one request, one cache entry, and a CSS file that maps each name to its position in the sheet. The combined file is also smaller than the sum of its parts.
spriters (Sprite-RS) is a fast CSS sprite generator written in Rust — a modern, multi-threaded reimplementation of Glue that adds SVG source support, WebP/AVIF output, and first-class CI integration.
spriters automates the whole pipeline: it finds your source images, packs them optimally, and emits the sprite sheet plus the stylesheet (CSS, LESS, SCSS…) to display each image by name. It works equally well for web UIs and game asset pipelines.
Why spriters?
- Faster — parallel decode, crop, resize, and output via Rayon
- Modern inputs — SVG files rasterised at the correct resolution
- Modern outputs — WebP/AVIF, TypeScript union types (
--dts), Tailwind safelist (--tailwind), CSS custom properties (--css-vars) - CI-ready — byte-for-byte reproducible output;
--checkexits non-zero when sprites are stale; incremental builds skip unchanged inputs - Glue compatible — drop-in replacement with a superset of Glue’s features
Quick start
cargo install spriters
# Generate sprite + CSS
spriters icons/ dist/
# Retina (2× + 1×) WebP sprite with TypeScript types
spriters icons/ dist/ --retina --format=webp --dts
# CI assertion — fail if sprites are out of date
spriters icons/ dist/ --check