Image Splitter
Drop in a picture and it is cut into tiles: a grid of rows and columns, which starts at 3 by 3, or tiles of a fixed pixel size for a sprite sheet or a print tiling. The part most splitters leave unsaid is what happens to the strip left over when the image does not divide evenly, so it is a named choice here: Keep puts those pixels in the last column and row, which is an extra narrower tile when you are cutting to a fixed tile size, so every pixel ends up in a file, and Crop discards them and says exactly how many went. Either way the leftover is printed in pixels next to the plan rather than quietly absorbed. Tiles are cut at whole pixel boundaries with nothing scaled, numbered left to right and top to bottom, and saved as tile-01-01.png onwards, so sorting the folder by name puts the grid back in order. The picture is decoded and the tiles are written in this tab: nothing is uploaded, there is no account, and the only thing remembered between visits is the mode, the grid or tile size, the remainder policy and the file type you last used.
The picture appears here, with the cut lines over it.
The numbered tiles appear here.
· or drop one anywhere on the stage
PNG stores each tile exactly as it was cut, so nothing is compressed a second time. Tiles are saved one file at a time, named tile-01-01.png onwards, so sorting the folder by name puts the grid back together. Click any tile to save just that one. A plan of more than 400 tiles is refused rather than started.
Common questions
- How do I split an image into a 3 by 3 grid?
- Choose a picture, or drop one onto the stage. Grid is the opening mode, at 3 rows by 3 columns until you change it, so the cut lines are drawn over your picture straight away and the nine numbered tiles appear beside it. Download all then writes them one file at a time, tile-01-01.png through tile-03-03.png. Rows and columns take any whole number up to 100 each, and a plan of more than 400 tiles is refused in words before anything is cut, rather than locking up the tab.
- What happens when the image does not divide evenly?
- You decide, and the tool tells you how much is at stake. A 2400 by 1600 picture split 3 by 3 gives columns of exactly 800 pixels, because 2400 divides by 3, but the rows come to 533 with one pixel left over. Under Keep that pixel stays in the picture: the last row is cut 534 pixels tall instead of 533, so no pixel is lost. Under Crop every row is 533 and the one leftover row of pixels is discarded, with the amount shown in the Remainder line. The leftover is reported in pixels either way, across the width and down the height.
- How do I split by tile size instead of by grid?
- Switch Split by to Tile size and enter the tile width and height in pixels, which is what a sprite sheet or a fixed print tiling needs. A 1000 pixel wide image cut into 300 pixel tiles gives three full tiles of 300 and, under Keep, a fourth tile of 100; under Crop it gives three tiles and drops the 100 pixel strip. The tile size is the fixed thing in this mode, so the leftover becomes an extra narrower column or shorter row rather than being folded into a neighbour.
- Is the image uploaded anywhere?
- No. There is no server in this. The file is read in the page, decoded by the browser's own image decoder, and each tile is drawn onto a canvas at its own pixel size and handed back as a download. No image byte is sent to an endpoint, to analytics or to error reporting, and no picture is written to your browser's storage. The only thing stored is the settings row: the mode, the grid or tile size, the remainder policy and the output type. If storage is blocked the tool still works.
- How are the tiles numbered?
- By row and column, zero padded, in reading order: tile-01-01 is the top left tile, tile-01-02 is the one to its right, and tile-02-01 begins the second row. Because the numbers are padded, sorting the downloaded files by name gives the grid back in order, and a grid with more than 99 rows widens the field so the sort still holds. The Order map block lists every file name with the exact rectangle of the source it came from, and Copy puts the whole map on the clipboard.
- Should I save the tiles as PNG or JPEG?
- PNG unless the files have to be small. Cutting a tile does not change a pixel, but writing it does: a JPEG source saved as JPEG tiles is compressed a second time, and PNG stores each tile exactly as it was cut. JPEG also has no transparency, so a PNG with transparent areas saved as JPEG tiles comes back with those areas filled white. Click any single tile to save just that one in the chosen type.
Tiles are cut at exact pixel boundaries and numbered left to right, top to bottom, so the grid can be rebuilt from the file names. Splitting re-encodes each tile: a JPEG source saved as JPEG tiles is compressed a second time, and PNG avoids that.