Drop them in
Files or a whole folder. Each image keeps its file name as its CSS class, so heart.png becomes .sprite-heart.
CSS sprite sheet generator
Pack every sprite. Waste zero pixels.
Drop in your icons, UI images or game frames. ZeroSprites packs them into the smallest sheet it can find, then writes the CSS and JSON for you. It all happens in this tab.
Nothing is uploaded Free, no account PNG, CSS and JSON out
Your sheet appears here.
packing
Three steps
From a folder of images to one sheet
The studio above already holds a set of sample sprites, packed. Swap in your own and the sheet rebuilds as you go.
Packed tight
The packer tries thousands of layouts across many sheet widths and keeps the one with the least empty space. You see the fill rate for your own set.
Code that matches
One PNG, a CSS class per image, and a JSON frame map that Phaser and PixiJS load as a texture atlas. Copy it or download the lot as a zip.
Why area matters
Empty space still costs memory
A browser decodes an image into a full bitmap: four bytes for every pixel, transparent or not. A 1,000 by 1,000 sheet takes about 4 MB of memory however much of it is blank, even when the PNG file itself is small.
That is why ZeroSprites chases the smallest area rather than the neatest grid. Hover the preview to see where each image landed, and read the fill rate under it.
The idea
Borrowed from chip design
Fitting rectangles into the smallest box is the same problem engineers face laying out blocks on a silicon chip, called floorplanning. The first ZeroSprites applied two floorplanning tools to CSS sprites: an exact solver for small sets and a B*-tree solver for large ones.
This version runs a fast packer in your browser instead, so there is nothing to install and no file leaves your machine. Read how it works.
Details
The small things, handled
Settings sit on the left of the studio. Change one and the sheet repacks.
Padding
Space between sprites stops neighbours bleeding in when a sheet is scaled or zoomed. Two pixels is the default; set zero for a pixel-exact sheet.
Private by design
Images are read and packed by your browser. There is no server step, no account and no tracking script on this site.
Smaller files
The sheet comes out as a lossless 32-bit PNG. For the smallest download, run it through a PNG optimiser or reduce it to 256 colours before you ship.
One request
Forty icons as one image is one download and one decode, and hover states never flash blank while a second file loads.
Shapes for every use
Smallest area for the web, square, or power-of-two sizes for older GPU texture rules. Cap the width if your layout needs it.
Retina ready
Tick the @2x box and the CSS is written at half size with a matching background-size, so high-density screens get sharp edges.