Split an image into a grid of tiles

Divide an image into a grid of separately downloadable tiles.

freeworks offlinenothing uploaded
ToolImage Splitter
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The source bitmap is divided into a grid of rectangular source regions, and each region is copied into a separate output image with its own dimensions and encoding. Remainder pixels are assigned according to the selected row or column policy.

  • Grid splitting retains exact pixel regions for sprites and tiled assets.

Worked example

Split Image into 2x2 Grid
Split an image into 4 equal tiles in a 2x2 grid
Input
											data:image/png;base64,iVBORw0KGgo=
Output
												Four PNG tiles, each covering one quadrant

When to use this

Sprite sheets, large scans, and map images split into tiles.

Edge cases

  • Dimensions not divisible by the grid need remainder handling.
  • Transparent borders can be mistaken for content when detecting tiles.
  • Tile numbering order affects animation or map assembly.

References