Sprite Sheet to Individual PNGs

Free Online Sprite Sheet Splitter

The Sprite Sheet Splitter lets you extract every sprite from a single sprite sheet without installing any software. Whether you're developing games, creating web animations, editing pixel art, or working with UI icon sheets, this tool can quickly divide a large image into individual PNG files.

Unlike basic image slicing tools, this splitter supports multiple detection methods. You can split sheets using fixed rows and columns, fixed sprite dimensions, or automatically detect sprites based on transparent pixels. After detection, every sprite is displayed in a preview grid where you can select, deselect, trim, preview animations, and export only the sprites you need.

Everything runs completely inside your browser, meaning your images never leave your computer. This provides faster processing while keeping artwork private.

Main Features

• Split sprite sheets into individual PNG images
• Auto-detect sprites using transparent backgrounds
• Split using rows & columns
• Split using fixed sprite width and height
• Trim transparent pixels automatically
• Skip empty or transparent cells
• Select or deselect individual sprites
• Live animation preview before export
• Export selected sprites as ZIP
• Download individual PNG files
• Generate JSON metadata
• Export Unity sprite rectangle JSON
• Generate Phaser / TexturePacker compatible JSON
• Generate Godot regions JSON
• Create CSS sprite classes automatically
• Build sprite sheets back from individual PNG files
• Browser-based processing with no uploads

When Should You Use This Tool?

Sprite sheets are widely used in game engines and web applications because loading one large image is usually more efficient than loading hundreds of smaller images. However, there are many situations where individual sprite files are needed again.

This tool is useful when:

• Editing individual game sprites
• Updating UI icon collections
• Extracting assets from old projects
• Converting texture atlases
• Preparing sprites for Unity or Godot
• Creating frame-by-frame animations
• Converting CSS sprite sheets
• Organizing pixel art assets
• Preparing datasets for machine learning
• Reverse engineering game resources

How the Detection Modes Work

1. Grid Mode

Grid mode divides the entire sprite sheet into equal rows and columns. This method works best when every sprite has identical dimensions and spacing.

2. Fixed Cell Size

Instead of entering rows and columns, specify the exact width and height of each sprite. The tool automatically calculates how many sprites fit inside the sheet.

3. Auto Detection

Auto detection scans transparent pixels and groups connected image regions into separate sprites. This mode is ideal for irregular layouts where sprites have different sizes or uneven spacing.

Worked Example

Suppose you have a sprite sheet named character.png containing a walking animation arranged in a 4 × 4 grid.

Image Size:

• 1024 × 1024 pixels
• Rows: 4
• Columns: 4
• Total frames: 16

Steps:

1. Upload the sprite sheet.
2. Select Grid Mode.
3. Enter 4 rows.
4. Enter 4 columns.
5. Enable automatic trimming.
6. Preview detected sprites.
7. Deselect any unwanted frames.
8. Preview the animation.
9. Export all selected sprites as ZIP.

The tool extracts sixteen PNG files such as:

• sprite_001.png
• sprite_002.png
• sprite_003.png
• ...
• sprite_016.png

You can also download matching JSON metadata for Unity, Phaser, Godot, or custom engines.

Worked Example: Split a 4×4 Sprite Sheet into 16 Individual PNG Files

Suppose you have a sprite sheet containing 16 character animation frames arranged in a 4-column by 4-row grid. Instead of manually cropping each frame in an image editor, you can use this Sprite Sheet Splitter to automatically extract every sprite as an individual PNG.

Input

• Sprite sheet size: 1024 × 1024 pixels
• Rows: 4
• Columns: 4
• Margin: 0 px
• Spacing: 0 px
• Auto-trim transparent pixels: Enabled
• Skip fully transparent cells: Enabled

Steps

1. Upload the sprite sheet image.
2. Select Grid (Rows × Columns) mode.
3. Enter 4 rows and 4 columns.
4. Keep margin and spacing at zero.
5. Preview the detected sprites.
6. Deselect any unwanted cells if necessary.
7. Click Download Selected as ZIP.

Result

• 16 individual PNG files are generated.
• Transparent borders are automatically removed.
• Files are named sequentially (sprite_001.png, sprite_002.png, etc.).
• A TexturePacker, Phaser, Unity, or Godot JSON file can also be exported.

Best Practices

• Use PNG whenever your sprites require transparency.
• Prefer Auto Detect mode for irregularly arranged sprites.
• Verify row and column counts before exporting.
• Enable transparent trimming to reduce file size.
• Keep consistent naming conventions across sprite packs.
• Export metadata JSON if the sprites will be used in game engines.
• Preview every detected sprite before downloading.
• Leave padding between sprites when creating new sprite sheets to prevent texture bleeding.
• Use ZIP download when exporting hundreds of sprites.
• Keep original sprite sheets as backups before trimming.

Common Errors

Incorrect Row or Column Count

Entering the wrong grid size causes sprites to be cut incorrectly. Always verify the layout before exporting.

Ignoring Margins and Spacing

Many sprite sheets include padding around cells. Configure margin and spacing values instead of assuming they are zero.

Using Auto Detect on Regular Grids

Grid mode is faster and generally more accurate for evenly spaced sprite sheets. Use transparency detection only when sprites are irregularly arranged.

Exporting Without Previewing

Always inspect the preview panel to ensure every sprite has been detected correctly.

Removing Needed Transparent Pixels

Some games rely on consistent sprite dimensions. If trimming changes alignment, disable automatic trimming.

Frequently Asked Questions