Image Sprites: Legacy Technique and Modern Alternatives
Why CSS sprites were critical for early web performance and when icon fonts or SVG symbols replace them.
DM
Dave Miller
Contributing Author · Squoosh Next BlogCSS image sprites combine multiple small images into a single file and use CSS background-position to display individual images, reducing the number of HTTP requests in an era when HTTP/1.1 limited browsers to 6 simultaneous connections per domain. A sprite sheet for a navigation bar might combine 20 icon images into a single 200×400px PNG, reducing 20 network requests to one. With HTTP/2 multiplexing, the request overhead that made sprites necessary has largely disappeared, making them an optimization whose time has passed for most use cases.
Modern alternatives include SVG symbol elements that embed multiple icons in a single SVG document referenced via use elements, and icon fonts that encode vectors as Unicode codepoints for CSS rendering. For pixel-art graphics or image-based UI components that require exact pixel positioning, sprites remain valid. For all scalable icon use cases, inline SVG or icon fonts are superior.
Key Takeaways
CSS image sprites combine multiple small images into a single file and use CSS background-position to display individual images, reducing the number of HTTP requests in an era when HTTP/1.
1 limited browsers to 6 simultaneous connections per domain.
A sprite sheet for a navigation bar might combine 20 icon images into a single 200×400px PNG, reducing 20 network requests to one.
With HTTP/2 multiplexing, the request overhead that made sprites necessary has largely disappeared, making them an optimization whose time has passed for most use cases.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.