Staaarter Tools

PNG Parts Splitter

Uploads a PNG and splits it into a columns x rows grid of separate image parts, each downloadable individually, by cropping each grid cell out with the same crop function this site's cropper tool uses. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-26
editorgeneratorimagecanvaspng

Overview

Introduction

This tool splits a PNG into a grid of separate image parts, computed entirely client-side, like cutting a photo into puzzle pieces.

Each part is its own independent downloadable image, cropped precisely from the source.

What Is PNG Parts Splitter?

A grid-splitting tool that divides an image into columns x rows cells and crops each one out into its own separate PixelBuffer, reusing this site's existing crop function for each cell.

Uneven divisions are handled by giving the last column and last row any leftover pixels, so the full image is always covered.

How PNG Parts Splitter Works

The tool computes a base cell width and height by dividing the image's dimensions by the requested column and row counts, then crops out each cell in turn.

The final column and row use whatever width/height remains after the earlier cells, ensuring every pixel of the source ends up in exactly one output part.

When To Use PNG Parts Splitter

Use it to prepare a set of puzzle pieces from a single photo for a game or print project.

It's also handy for splitting a large image into smaller tiles for platforms with upload size limits.

Often used alongside PNG Splitter, PNG Multiplier and PNG Grid Drawer.

Features

Advantages

  • Runs entirely client-side; your image never leaves the browser.
  • Every source pixel ends up in exactly one output part, with no loss or duplication.
  • Reuses the site's existing, well-tested crop function for each grid cell.

Limitations

  • Each part downloads individually; there's no single combined zip export.
  • The grid size is capped at 16 columns and 16 rows, and the image must have at least that many pixels in each dimension.

Examples

Make a 3x3 puzzle from a photo

Input

A 900x900 PNG photo, 3 columns x 3 rows

Output

9 separate 300x300 PNG parts, one per grid cell

The image divides evenly, so every part is exactly the same size.

Split an image with uneven dimensions

Input

A 100x50 PNG, 3 columns x 1 row

Output

Three parts: two 33px-wide and one 34px-wide, all 50px tall

Since 100 doesn't divide evenly by 3, the last column absorbs the extra leftover pixel.

Best Practices & Notes

Best Practices

  • Preview each part before downloading to confirm the grid split lines up the way you expect.
  • Use a source image size that divides evenly by your chosen grid for uniformly-sized parts.

Developer Notes

This tool's lib function reuses the existing crop lib function once per grid cell rather than re-deriving cropping logic, iterating rows and columns and handling the leftover-pixel remainder on the last column/row; it operates on plain Uint8ClampedArray pixel buffers with no DOM dependency.

PNG Parts Splitter Use Cases

  • Creating puzzle pieces from a photo for a game or print project
  • Splitting a large image into smaller tiles for upload size limits
  • Preparing a grid of assets from a single source sprite sheet

Common Mistakes

  • Expecting a single zip file download — each part must be downloaded individually.
  • Requesting more columns/rows than the image has pixels in that dimension, which the tool rejects.

Tips

  • Use a grid size that evenly divides your image's dimensions for uniform part sizes.
  • Combine with the multiplier tool in reverse: split first, edit a single part, then reassemble manually if needed.

References

Frequently Asked Questions