← All guides

How to Make a Sprite Sheet from Separate Images

5 min read · Updated October 2026

Whether you drew 30 frames in different files or downloaded an asset pack of loose PNGs, most engines want them combined into a single texture atlas: one image plus data describing where each sprite sits. SpritePilot’s Bulk Sprite Sheets tool does exactly that, entirely in your browser.

Open Bulk Sprite Sheets — free, in your browser, no signup.

1. Upload your images. Drag all your individual sprites into the upload area at once — PNG, JPG, GIF, and WebP all work (SVG doesn’t), and PNGs with transparency are recommended. An animated GIF counts as one still image; to unpack its frames, use GIF → Sprite Sheet instead. Each file shows up as a thumbnail with its name and dimensions; remove strays with the trash button on each one. Two files with the same name are renamed (walk, walk_2) so neither is lost, and a note lists every rename.
2. Choose a packing algorithm. "Algorithm" has two choices. "Bin Packing" places each image against the edge of the sheet or an image already placed, tries several orders, and keeps the smallest, squarest sheet — best when your images are different sizes. "Simple Grid" arranges everything in uniform cells sized to the largest image, in the order you added them, each image in the top-left corner of its cell — best when frames belong to one animation and should stay evenly spaced.
3. Set the limits and padding. "Max Width" and "Max Height" (256–8192, default 2048) cap the sheet size; the sheet itself comes out only as big as the packed images need, without padding up to a power of two. "Padding" (0–20, default 2) is the exact gap in pixels between neighboring images, with no border around the outside. "Background Fill" defaults to "Transparent (no fill)"; you can also bake in white, black, or gray. These settings are remembered for next time; the uploaded images aren’t, so a reload clears the list.
4. Generate and inspect. Click "Generate Sprite Sheet". The preview renders over a checkerboard so you can see exactly which areas are transparent, with the sheet’s dimensions and the number of sprites packed. From then on the sheet rebuilds by itself whenever you change a setting or the image list, so you can switch the Algorithm and compare sizes at once. If the images can’t fit inside your max dimensions, an error names the ones that didn’t fit and the size that would hold them all — raise the limits or drop some images.
5. Download PNG + JSON. "Download PNG + JSON" saves sprite-sheet.png and sprite-sheet.json. The default "JSON format", "TexturePacker JSON (Hash)", is read directly by Phaser 3 (load.atlas) and PixiJS (Assets.load). It lists the frames in the order you added the images and names each one after its file with a .png ending (walk.png, even if the file was a JPG) — that’s the frame name you use in code. Prefer a plain list? Choose "Simple list" for each image’s name (no extension), x, y, width, and height.

Tips

• 4096×4096 is the largest sheet size you can count on every GPU to load, and the limit to stay under for web and mobile; the 2048 default is well inside it. Each 2048×2048 sheet still takes 16 MiB of memory once loaded, however small the PNG file is.
• Keep at least 2 px of padding if the sheet will be scaled, filtered, or mipmapped — it keeps neighboring sprites from bleeding into each other. This tool has no extrude option; if tiles still show lines in your engine, re-export them from Export & Download with Extrude.
• Need Godot, Aseprite, or CSS metadata, trimming, pivots, or animation tags? Those live in Export & Download, which works on your session. Generate here with Simple Grid and a transparent background, download the PNG, then cut it in Sprite Detection’s Grid Slice with the same columns and rows, Margin 0, and Spacing equal to your padding — the frames land in your session in order, ready to rename and export.
• No images yet? Draw your frames in the built-in Pixel Art Editor — its "Send to Session" button puts them straight into Export & Download, which packs them into a sheet with engine metadata.

Is there a limit on how many images I can pack?

No count limit — the constraint is the sheet size. If everything fits inside Max Width × Max Height (at most 8192×8192) with your padding, it packs. If not, the error tells you the size that would hold everything, or that even 8192×8192 is too small and the images need splitting over several sheets.

Are my images uploaded anywhere?

No. The packer runs entirely in your browser; files never leave your device.

Go deeper

• Sprite Sheet vs. Texture Atlas: What’s the Difference? — The same 30 sprites packed with Simple Grid and with Bin Packing, measured side by side.
• How Big Can a Sprite Sheet Be? Texture Size Limits, Memory and Power of Two — What to set Max Width and Max Height to for web, mobile, and desktop.
• Why Lines Appear Between Your Tiles (and How to Get Rid of Them) — When padding is enough, and when you also need extrude.
• Phaser: Loading Sprite Sheets and Texture Atlases (and Animating Them) — Load the PNG and JSON with load.atlas and build animations from the frame names.

Related guides

• Sprite Sheet Export Formats Explained
• How to Split a Sprite Sheet into Individual Sprites
• How to Draw Your Own Pixel Art Sprite