HandyjarFind a tool

Sprite sheet generator

Combine local sprites into a PNG and matching coordinates.

No uploads — your images stay in your browser.

1. Add images

Or drop them here. PNG, JPEG, WebP, GIF, BMP, TIFF, AVIF and SVG. An animated file supplies one still image.

No images selected

    2. Layout settings

    Sprites keep their original oriented dimensions. Grid columns use their widest sprite; rows use their tallest. Padding surrounds the sheet and separates cells. Extrusion repeats edge pixels outside each sprite rectangle.

    Choose local images to begin.

    3. Preview and downloads

    Your sprite sheet will appear here.

    Generate a sheet to see its dimensions and downloads.

    The preview is the exported PNG, scaled to fit. The checkerboard shows transparency and is not part of the file. Changing the images or settings clears the result until you generate again.

    Matching coordinates

    sprites.json uses the common atlas layout: a frames object keyed by file name, each with frame x/y/w/h in pixels from the top left, plus meta.image and meta.size. Rectangles exclude padding and extrusion; sprites are never rotated, resized or trimmed. Repeated file names get -2, -3 before the extension, and every entry also records its index and sprite-N ID.

    Keep sprites.png beside sprites.css. Use <span class="sprite sprite-1"></span> for the first sprite, sprite-2 for the second, and so on. IDs follow the final image order. Add an accessible label when a sprite conveys information.

    The ZIP holds the identical sprites.png, sprites.json and sprites.css, stored uncompressed and without ZIP64; if that format limit is reached, the individual downloads remain.

    How it works

    1. Add images. Move them up or down, sort by name, or remove files.
    2. Choose a grid or strip, padding, edge extrusion and background.
    3. Generate, inspect the sheet, then download everything as one ZIP or the PNG, JSON and CSS separately.

    Files stay on your device.

    Images are decoded, arranged and exported in your browser. Files and names are not uploaded, logged or stored. Names appear only in your selected list and downloaded JSON. Cancel stops processing; Reset clears the selection and output.

    Frequently asked questions

    Will the sheet preserve transparency and image quality?

    Transparent background keeps alpha; Solid color flattens it onto your chosen color. Output is lossless PNG at each sprite's oriented size, without trimming or rescaling. Decoding converts to sRGB, so HDR and wide-gamut colors can change. Original EXIF and other file metadata are not copied. Opaque and fully transparent pixels are copied exactly. The browser canvas stores partly transparent pixels premultiplied, so their alpha is exact but their color can shift slightly, and more at very low alpha where it is barely visible.

    What do padding and extrusion do?

    Padding leaves background space between cells and around the sheet. Extrusion extends each edge by repeating its outermost pixels, including corners. JSON and CSS rectangles cover the original sprite only. Transparent edge pixels stay transparent unless you select a solid background.

    Is this an optimized texture packer?

    This tool provides predictable grids and strips. It does not rotate, trim, resize or search for the tightest packing. Different image sizes can leave unused background space. Output dimensions are determined by the selected images and spacing; they are not rounded to powers of two.

    Which files can I use, and what if one fails?

    Use PNG, JPEG, WebP, GIF, BMP, TIFF, AVIF or SVG supported by the available decoders. Animated GIF and WebP files contribute their first frame only, and any other animated or multipage file also supplies a single still image. A file that cannot be read is marked in the list and left out; the remaining images still form a sheet that is labelled as partial, and sprite IDs count only the included images. No fixed image-count or pixel cap is imposed. If the browser cannot create a canvas of the required size, the tool says so and keeps your images and settings.

    Can I import the metadata into a game engine?

    sprites.json follows the widely used JSON hash atlas layout: frames keyed by file name with frame, sourceSize and spriteSourceSize, plus meta.image and meta.size. Loaders that read that layout can use it; nothing is rotated or trimmed. Repeated file names get -2, -3 before the extension so every key is unique, and each entry keeps its index, sprite-N ID and original name. The included CSS works directly with the PNG for web sprites.