Sprite sheet

Sprite sheet packs up to 120 images onto one PNG or WebP and writes the CSS, SCSS map and JSON manifest that address them. Four layouts are offered: a binary packer that fits varied sizes into the least space, a grid of identical cells, a single row and a single column — and every sprite is drawn at its natural size, never scaled, because a resampled sprite has a soft edge. Padding is applied around each sprite and around the sheet edge by the same amount, so a rounded background-position lands on empty pixels rather than on the next sprite along.

How it works

  1. Add the sprites Drop the images. They are listed in the order they were added, up to 120 per sheet, and each one keeps its own pixel size.
  2. Choose a layout Pick binary for the tightest packing, grid for identical cells you can address by arithmetic, or a single row or column. Grid and binary also take a maximum width, which the sheet wraps at rather than passing.
  3. Set the padding and the sheet name Set the padding in pixels around every sprite, turn on the power-of-two option if your engine needs both edges rounded up to 2, 4, 8 or 16, and type a sheet name — it names the image file and prefixes every generated class.
  4. Copy the code you need The CSS, the SCSS map with its mixin, and the JSON manifest are generated live beneath the preview. Each has its own copy button.
  5. Download Press "Download sheet" for the image on its own, or "Download sheet and code as ZIP" to get the PNG or WebP with the CSS, SCSS and JSON files beside it.

Questions

Does it resize my sprites to fit?
No. Every sprite is drawn onto the sheet at its natural pixel size, because resampling softens a sprite's edge. The sheet grows to hold them, and a sprite wider than the maximum width widens the sheet rather than being cropped or dropped.
Should I choose PNG or WebP?
PNG. A sprite sheet has to keep its alpha, so those are the only two formats offered, and WebP written from a browser canvas is lossy even at quality 1.00, which softens the edge of every sprite — the tool posts a notice saying so when you pick it.
How large can the sheet get?
Browsers stop drawing a canvas somewhere above 16384 pixels on an edge, so the tool warns and will not export a sheet past that. Lower the maximum width or remove a sprite.
What if two filenames give the same CSS class?
They are numbered apart. A filename is lowercased and reduced to a CSS identifier, a leading digit gets an s in front so the selector parses, and a collision — icon home.png and icon-home.png both give icon-home — becomes icon-home-2, with a notice telling you how many were renamed.

Every tool