How to use Image Sprite Sheet Builder

Choose two to twenty sprite images and set their order with Up and Down.
Set the maximum atlas width and padding around each sprite.
Select Build sprite sheet. Each sprite keeps its original pixel size.
Download the PNG atlas, JSON coordinate map and CSS file together.

Example: Image Sprite Sheet Builder

A local worked example using the inputs and settings below for image sprite sheet builder.

You add

Sprite images in atlas order: ["red.png (288 bytes)","blue.png (334 bytes)"] Maximum atlas width in pixels: "1024" Padding around sprites in pixels: "2"

You get

Packed 2 sprites into 166 × 64 pixels without resizing. red | 2 | 2 | 80 | 60 blue | 84 | 2 | 80 | 60 sprite-sheet.png (166 × 64 pixels) sprite-sheet.json sprite-sheet.css

Options

Maximum width: The packing plan stays within the entered row width and output bounds. A sprite that cannot fit is refused rather than silently resized.
Padding: Padding separates sprites in the atlas. Use the exported coordinates rather than guessing positions from the image.

Supported inputs and limits

Choose 2–20 JPEG, PNG or WebP files, 12 MiB each, 20 MiB total and 20 megapixels combined. Maximum atlas width is 32–4,096 pixels; padding is 0–32 pixels. The final PNG is limited to 20 megapixels and 10,000 pixels per side. Sprites are not resized or rotated. Packing follows file order in rows rather than optimizing every empty space. CSS class names are cleaned from file names, with suffixes for collisions. Source metadata is not carried into the atlas.

Where your input is processed

This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Using the exported coordinates

The JSON map records each sprite’s x and y position from the top-left of the PNG, plus its original width and height. The CSS file uses those same coordinates as negative background positions. Keep the three downloads together under their original filenames, or edit the CSS image path if you rename the PNG.

Questions about Image Sprite Sheet Builder

Why is there empty space at the end of a row?

The next sprite moves to a new row if its full width and padding do not fit. This simple row packing preserves the file order and original size.

Can two files have the same name?

Yes. The CSS and JSON names receive numbered suffixes so each sprite has a distinct entry.

Does the CSS file resize sprites?

No. Each class sets the original sprite width and height and a negative background position into sprite-sheet.png.

Project manager: Tony Hines · Content updated 4 October 2026 · Report a problem