Grid Splitter — cut one image into 4, 9, 16 or 25 cells, swap any cell, heart and star masks, all local
Grid splitting means cutting one image into equal parts and posting them in order. There are four grids here — 4, 9, 16 and 25 cells. Pick the count and the image is cut along the cell boundaries, with every finished piece visible in the preview. By default the whole image fills the grid, so a nine-cell split still assembles into one picture on a social feed; if you want a different image in one cell, click that cell and upload it separately, then drag its position and scale. You can also lay a shape mask over the whole grid — heart, five-point star, hexagon, stamp, flower, circle or rounded square. The mask sits on the entire grid: only pixels inside the shape survive, everything outside is transparent by default or a colour you choose, which is enough for avatars, stickers and poster collages. The preview can show grid lines and a transparency checkerboard so you can see every boundary and the empty margins; landscape and portrait sources both work — filling crops the extra part, fitting leaves transparent edges. Cell size, gap and output format are all adjustable, and you can export a single cell, the whole image, or one ZIP. Everything is drawn locally with Canvas in your browser; images are never uploaded to any server.
Grid preview
9 cells1800 × 1800Click a cell to select it, then drag to reposition that cell's image; changing the grid clears per-cell settings
Cell
Click any cell in the preview to replace its image, zoom it or move it on its own
How to use
- Drag an image into the box above, or click Choose image, or simply press Ctrl+V to paste a screenshot. A grid preview appears on the right immediately, defaulting to a 3 by 3 nine-cell grid.
- In the Grid panel on the right, switch between 4, 9, 16 or 25 cells, then set the output pixels with Cell size; the side of the whole grid is that value times the cell count. Want some breathing room? Pull the Gap slider — the gap is a percentage of the cell width, and every piece ends up with a transparent margin.
- To change one cell: click that cell in the preview, then click Use a different image in the Cell panel. Afterwards you can drag on the canvas to reposition and use the slider to zoom; Restore original puts that cell back to the plain split, and Reset position only recentres it without changing the image.
- To add a shape, pick a mask: heart, five-point star, hexagon, stamp, flower, circle or rounded square. The outside of the shape is transparent by default and can also be set to a colour. Finally choose the format and quality, then download the selected cell, download the whole image, or package everything into one ZIP.
Frequently asked questions
Can the pieces be put back together into the original image?
Yes, as long as the cell count and the order stay the same. Every piece is cut strictly by the coordinates of the whole picture, with identical sizes, no overlap and no gaps, so arranging them from 1 to N gives you the original back. That is why downloaded files carry a sequence number and the ZIP is ordered the same way — do not rename them out of order.
Why does every piece get a transparent edge once I add a gap?
The gap is intentional. It is a percentage of the cell width, so each piece shrinks inward a little and leaves transparent pixels around it. On some platforms that margin stops neighbouring cells from sticking together; if you do not want it, drag the gap back to 0 and the pieces meet exactly.
Why isn't there a complete heart in every cell?
Because the mask sits on the whole grid, not on each cell. The picture has a single heart-shaped window, so cells in the corners naturally receive only their part of that heart — put them together and you get one complete heart. Applying the mask per cell would give you nine small hearts instead.
I chose a heart and exported JPEG, so why is the outside white?
The JPEG format has no alpha channel, so pixels outside the shape have to land on a solid colour. It defaults to white, and you can pick another colour under Outside the shape. If you genuinely need transparency, export PNG or WebP — both carry alpha.
After replacing a cell, can I adjust only that cell's zoom and position?
Yes. Select the cell and drag directly on the preview to move it, or use the slider on the right to zoom up to three times. Reset position only zeroes the zoom and offset without reverting the image. To put one cell back to the plain split, click Restore original; to clear every per-cell setting at once, click Clear cell overrides.
What is it
Grid splitting looks simple, but the real problem is how one image becomes N pieces that still fit back together. The key is the coordinate system: the whole image has a width and a height, and after cutting it into n by n the piece in row r and column c starts at column index c times the cell width and row index r times the cell height, with each side equal to the full width or height divided by n. As long as every piece is taken by exactly that formula, reassembling leaves no gap and no ghosting. What actually goes wrong is scaling: cut first and scale each piece separately and every seam picks up a faint bright line from independent interpolation; the correct order is to scale the whole image to the target size first and then cut by pixel coordinates, which keeps the seams clean. Masks work the same way — a mask cannot be applied to each cell separately, because then every cell would get its own complete heart. The grid has to be assembled into one picture first and the shape applied once, so cells at the edge naturally receive only their share of the shape. That is why every shape path here is computed from the side length of the whole grid. As for the area outside the shape, PNG and WebP can store transparency and JPEG cannot, so exporting JPEG lays down a base colour.
Origin & history
What we now call slicing was originally called imposition in printing. In the letterpress era, printing one large picture across several pages meant working out the coordinates of each page and then cutting the film along them; photographic typesetting machines took over that craft in the 1970s and moved the coordinates from paper into the machine. In 1993 engineers at Netscape began storing several button states in one large image and slicing them out with background positioning — the sprite sheet, which ruled web icons for a full fifteen years until icon fonts and SVG pushed it aside. Earlier still, in the 8-bit era, game characters and scenes were assembled from tiles, and taking blocks out of an atlas by coordinate is slicing in all but name; the nine-patch stretchable image Android introduced in 2011 uses the same word, though it slices a stretchable border rather than picture content. The nine-cell grid as a mass pastime had to wait for the smartphone: Instagram launched in 2011 allowing only square images and added multi-image posts and grid profiles in 2013, and users quickly discovered that cutting one image into three rows and three columns and posting them in order assembled a complete picture on the profile. The Chinese internet calls this nine-cell slicing, and the tools are mostly a single web page: upload, cut, download. Around the same time phone galleries and social platforms began cropping every image to a square preview, which pushed these tools further into use. Masks are older still: dodging in the darkroom is the most primitive mask — a black card with a hole laid under the enlarger lets only the hole expose the paper — and the cut-outs in paper-cutting and seals are the same idea. Digital image processing introduced the alpha channel in the 1980s, turning the mask from physical paper into arithmetic multiplication and addition. SVG clipPath in 1999 and canvas clip in the 2004 HTML5 draft turned using a path as a knife into a single line of code in the browser — and the effect you see when you click the heart button today runs along exactly that road.
Related keywords
Feedback
Found a problem with a tool or have a suggestion? Email us — we read every message.
