Step 1
Choose images or a strip
Upload several separate frame images, or select one long strip and tell the tool how many equal frames it contains and whether they run horizontally or vertically.
Client-side image to sprite sheet converter
The upload controls, canvas preview, grid settings, PNG or GIF encoder, metadata, and download actions hydrate in the browser. Large files stay on this device: nothing leaves your browser.
Multiple images or one strip · one clean sprite sheet
Image to Sprite Sheet Converter
Turn separate animation images or one long horizontal or vertical strip into a regular sprite sheet. Choose the source mode, control the output columns, and download a PNG with exact metadata.
- Multiple-image mode preserves upload order and original RGBA pixels
- Strip mode cuts equal frames horizontally or vertically before repacking
- Transparent output, deterministic grid math, and no server upload
How to use the image to sprite sheet converter
Step 2
Choose the output layout
Set the number of output columns plus optional transparent padding and gaps. Rows and final sheet dimensions update from the actual decoded frame sizes.
Step 3
Download PNG and metadata
The browser packs the RGBA frames in order, encodes a real PNG, and exposes frame width, frame height, columns, rows, frame count, and full sheet dimensions.
From source images to a regular sprite atlas
Image-to-sheet conversion is mostly about preserving order and producing a grid that downstream tools can address without guessing.
Separate files versus a strip
Separate files can have different dimensions. The largest width and height define a shared cell, while smaller sources are centered at their original size and remain transparent around the edges.
A strip is treated as an existing one-row or one-column sheet. Its length must divide evenly by the requested frame count so each extracted frame has identical integer dimensions.
Padding, gaps, and engine importers
Padding adds transparent pixels around the outside of the entire sheet. Gaps add transparent pixels between cells. Both can prevent texture bleeding, but your importer must be configured with the same values.
For nearest-neighbor pixel art, keep source pixels at native scale and let the game engine scale the texture. This tool never smooths or resamples frames while packing them.
PNG output and alpha
The export is an RGBA PNG, so fully transparent background pixels and partial alpha from PNG or WebP sources can remain intact. JPEG sources arrive without transparency because JPEG has no alpha channel.
The PNG byte size depends on color repetition, transparency, dimensions, and compression. Two sheets with identical geometry can have very different file sizes.
Measured image-to-sheet fixture
The regression fixture supplies four actual 4×4 RGBA images. In a 2-column grid with no spacing, the engine creates an 8×8 sheet containing four 4×4 cells.
With 1-pixel outer padding and a 1-pixel gap, the same frames create an 11×11 sheet and encode to a 132-byte PNG. The test also slices the no-spacing sheet back into four buffers and compares their pixels to the original images.
Common mistakes
- Assuming file pickers always return a natural numeric filename order such as 1, 2, 10.
- Entering the number of pixels instead of the number of frames in strip mode.
- Adding texture-bleed gaps without recording the gap for the engine importer.
- Mixing frame sizes when the intended animation origin is not centered in every source image.
Image to sprite sheet FAQ
How do I convert images to a sprite sheet?
Upload the frame images in order, choose the output columns, and download the generated PNG. The tool places frames left to right and then top to bottom.
Can I convert one long image strip into a sprite sheet?
Yes. Choose strip mode, upload the horizontal or vertical strip, enter its frame count, and then select the new output column count.
Do the images leave my browser?
No. Files are decoded with browser image APIs, packed through local canvas pixel data, and encoded as PNG on your device. Nothing leaves your browser.
What happens when source images have different sizes?
The largest source width and height become the common cell size. Smaller images are centered without scaling, leaving transparent pixels around them.
Does the converter resize or smooth pixel art?
No. It copies the original RGBA pixels at native size. The preview uses pixelated rendering, and the output packing step does not interpolate the frames.
What are padding and gap used for?
Padding surrounds the whole sheet; gap separates neighboring cells. They can reduce texture bleeding, but they also change the coordinates your engine must use.
Which image formats work?
Any format your browser can decode through its image APIs can work, commonly PNG, WebP, JPEG, GIF still frames, and BMP. PNG or WebP is preferable when transparency matters.