Free Sprite Sheet Splitter — Slice Atlases to PNG Frames

Reusing animation frames or extracting icons from a sprite atlas usually means firing up Photoshop or writing a one-off Python script. PikDraw's Sprite Sheet Splitter does it in the browser: drop a sheet, set rows × cols, download a ZIP of individual PNG frames in seconds.

What is the Sprite Sheet Splitter — Extract Frames from Sheet?

Sprite Sheet Splitter is a client-side grid-based PNG slicer. You point it at any sprite sheet, declare how many rows and columns it contains, optionally specify margin and inter-frame spacing, and download every frame as a standalone PNG.

Key features

  • Visual grid overlay confirms your slicing
  • Configurable rows, columns, margin, spacing
  • PNG output with transparency preserved
  • Sequential, zero-padded filenames
  • Live frame-count preview
  • Sheets up to 8192 × 8192
  • 100% client-side — sheet never uploads
  • Free, unlimited, no signup or watermark

How it works

We decode the uploaded PNG into a hidden canvas and compute each frame's bounding rect using sheetW, sheetH, rows, cols, margin and spacing. For every cell we draw the corresponding rect into a frame-sized canvas, export it via toBlob('image/png'), and add it to an in-memory ZIP. Once all frames are processed the ZIP is saved with a single click.

Why use this tool

Online splitters either upload your sheet (slow and privacy-risky) or are tucked inside paid game tooling. PikDraw runs locally, has no caps, never watermarks, and is the fastest path from a sheet to a clean folder of PNGs.

Common use cases

  • Extracting animation frames from legacy game assets
  • Pulling individual icons out of a CSS sprite sheet
  • Re-organising a pixel-art set for re-packing
  • Auditing the contents of a downloaded sprite pack
  • Salvaging frames from old Flash exports
  • Generating per-frame PNGs for GIF or video encoders
  • Recreating animations in modern engines

How to use this tool

  1. Upload your sheet — Drop any PNG sprite atlas. The tool previews the image and lets you overlay a configurable grid so you can confirm slicing before export.
  2. Set rows and columns — Type how many rows and columns your sheet contains. The grid overlay updates instantly — adjust until every frame is enclosed in a single cell.
  3. Add margin & spacing (optional) — Margin is the empty border around the whole sheet; spacing is the gap between frames. Both are in pixels. Most sheets need 0/0; engine-exported sheets often use 2/2.
  4. Preview frames — A live frame counter shows the slice count (rows × cols). Adjust until it matches the number of sprites you expect.
  5. Download ZIP — Get every frame as an individual PNG inside a ZIP. Files are numbered frame_001.png … frame_NNN.png in row-major order.

Who should use this

Indie devs migrating between engines, web developers extracting CSS sprites, animators repurposing assets, modders ripping sprites from legacy packs (for personal use), and educators demonstrating bitmap atlases.

How to get started

Upload your sheet, set rows × cols, hit Slice. The ZIP downloads automatically.

Best practices

  • Use the grid overlay to verify alignment before exporting
  • Set margin/spacing if the sheet was exported by an atlas tool
  • Keep file counts under 1000 — most ZIP unzippers struggle beyond that
  • Pre-trim noisy edges from the sheet in Photoshop if alignment is off

Pro tips

  • If your engine produced the sheet, you know the exact rows × cols — type them in.
  • Use margin/spacing when frames look offset or partial.
  • All frames in the export are identical size — equal to (sheetW − 2·margin − (cols−1)·spacing) / cols.
  • Re-import the split frames into Sprite Sheet Generator to re-pack them differently.

Expert insights

💡 Eyeball the Overlay

Adjust rows/cols until the grid lines hug every frame perfectly before clicking Slice.

💡 Match Engine Padding

Sheets exported from Phaser or TexturePacker usually need margin=2 and spacing=2.

💡 Re-pack After Splitting

Pair this tool with Sprite Sheet Generator to remix sheets — split, edit, repack.

Limitations to be aware of

  • Regular grids only — no support for irregular atlas rects
  • No JSON-atlas-driven slicing in v1
  • Sheets capped at 8192 × 8192 by browser canvas limits
  • Performance drops above ~1024 frames per sheet

Frequently asked questions

What sprite-sheet formats are supported?
Any PNG. JSON atlases (TexturePacker, Phaser) describe arbitrary rectangles; this tool assumes a regular grid. For irregular atlases use the engine's own slicer.
Why are my frames cropped at the edges?
Your sheet probably uses margin or spacing. Increase the margin value until the grid overlay snaps cleanly to each frame.
How are the frames named?
frame_001.png … frame_NNN.png — numbered row by row, left to right. The number is zero-padded to the digit width needed for the total count.
How large a sheet can I split?
Up to roughly 8192 × 8192 — the browser canvas ceiling. Larger sheets should be tiled and split per quadrant.
Is my sheet uploaded?
No. The image is decoded into a local canvas; each frame is exported via toBlob and zipped with JSZip. Nothing leaves your browser.
Can I export a JSON manifest too?
Not in v1. Use Sprite Sheet Generator's manifest format if you need a TexturePacker-style atlas description.

Browse all PikDraw image tools →