Why it matters
A sprite sheet puts many small images into one file. For a game, it means one texture upload and fast drawing. For a website, it's less needed since HTTP/2, but it still helps for sets of small icons or hover states that should appear instantly. The work is in the packing: lay the images out badly and the sheet is twice the size it needs to be.
This packer uses MaxRects, the algorithm behind most texture packers. Each image goes into the free space it fits most snugly, measured on its short side. It runs at a range of sheet widths and keeps the one with the least wasted area. Add padding to stop neighbouring sprites bleeding into each other when scaled, or round the sheet up to powers of two for engines that need it. You get the PNG, a CSS class per image (with background-size for retina images) and a JSON atlas that game frameworks load directly.
How to use it
- Drop your images; file names become class names.
- Set padding, and tick power of two or @2x if you need them.
- Check the sheet and how much of it is used.
- Download the PNG, CSS and JSON.
FAQ
Are CSS sprites still worth it?
For many tiny icons or hover states that must appear instantly, yes. For a handful of images, HTTP/2 makes separate files fine. For icons, an SVG symbol sprite is usually better.
What does the efficiency figure mean?
The share of the sheet's area covered by your images. Above 85% is good; padding and very different sizes lower it.
Which JSON format is the atlas?
The TexturePacker JSON hash format, which Phaser, PixiJS and many other engines read.
Are my images uploaded?
No. They're packed and drawn in your browser.
