CodeKitHubWhat Is This Tool?
An image splitter divides a single source image into a grid of smaller tiles of equal size, most commonly for the Instagram "grid layout" trend where a single wide photo or illustration is posted as a sequence of individual square images that reassemble into the original when viewed together on a profile grid.
The technique itself is simple geometry — the source image's width and height are each divided by the number of columns and rows, and each resulting rectangle is cropped out as its own file — but doing it accurately by hand in a general-purpose photo editor is fiddly and error-prone, especially for a 3x3 or larger grid where a small misalignment on one tile throws off the whole sequence.
This tool computes the grid boundaries precisely from the image's actual pixel dimensions and renders each tile using the HTML5 Canvas API entirely in your browser, so every tile lines up exactly and the image itself never has to leave your device.
Why Use It?
- You just finished a wide illustration or photo you want to reveal as a 3x3 grid takeover on your Instagram profile, and you need all nine tiles cropped pixel-perfect so the seams line up when viewers scroll past.
- You're launching a product and want a panoramic banner image to unfold across a four-post carousel instead of being awkwardly squeezed into one square crop.
- You tried splitting a grid image by hand in a general photo editor once, the tiles didn't quite line up, and you don't want to repeat that mistake on a 9-tile grid where one bad crop throws off the whole sequence.
- You need all nine (or four, or six) tiles ready to go before you start scheduling posts, not cropped one at a time between each upload — the single ZIP download gets you the whole batch at once.
- You want to preview exactly how the grid will look tiled together before committing to posting order, so you catch an awkward crop line or an off-center subject before it's live on your profile.
- 100% local: your image is processed entirely in your browser using Canvas, and is never uploaded to a server.
How to Use
- Click the drop zone (or drag and drop) to choose an image from your device.
- Choose a grid size — 1x2, 1x3, 2x2, 3x3, or 1x4 — from the dropdown.
- Preview the resulting tiles instantly below the controls.
- Click "Download all (ZIP)" to get every tile as a numbered PNG file in a single ZIP archive.
Example
Input
A 1200×1200px square photo, grid: 3x3Output
9 tiles of 400×400px each, tile-1.png through tile-9.pngTiles are numbered left-to-right, top-to-bottom — the same order you'd upload them to Instagram (starting from the bottom-right tile and working backward, so that as you publish new posts, older tiles get pushed down and the grid reassembles correctly).
Common grid sizes and their uses
Different grid sizes suit different kinds of posts and reveals.
| Grid | Tiles | Typical use |
|---|---|---|
| 1x2 | 2 | Simple before/after or two-part reveal |
| 2x2 | 4 | Small square reveal, quick to post |
| 1x3 | 3 | A single row across three consecutive posts |
| 3x3 | 9 | Full profile-grid takeover — the classic Instagram grid layout |
| 1x4 | 4 | A wide panorama split across four posts in a row |
Related tools
For other local image editing, try these tools.
Getting a clean reveal: source image tips
The split itself is exact math, but how good the final grid looks depends heavily on the source image you feed it — a few habits before you upload save a lot of frustration after.
Start with a square (or near-square) source image for a 3x3 or 2x2 grid, since Instagram itself will otherwise crop your tiles to square when you post them, potentially cutting off content the splitter preserved. Keep your subject's important details away from where the grid lines will fall — a face or focal point that lands exactly on a tile boundary reads as visually broken even when the crop is mathematically perfect. And export at the highest resolution you have available before splitting; Instagram compresses on upload regardless, so starting from a larger source image gives each individual tile more detail to survive that compression than starting from an image already sized for a single post.
Frequently Asked Questions
What grid size should I use for an Instagram profile grid?
3x3 (9 tiles) is the most common choice since it fills a standard three-column Instagram profile view exactly once. A 2x2 or 1x3 split works for a smaller reveal that doesn't take over your entire recent grid.
What order should I post the tiles in?
Because Instagram's grid displays newest posts first (top-left), you generally need to publish tiles in reverse order — starting with the bottom-right tile of your grid and finishing with the top-left one — so that by the time all tiles are posted, they read correctly left-to-right, top-to-bottom.
Does the image need to be a perfect square?
No, but for a symmetric grid layout (like 3x3) a square source image gives square tiles, which matches how Instagram crops square-grid posts. A non-square image will still split evenly, just into rectangular rather than square tiles.
What file format are the tiles saved as?
Each tile is exported as a PNG file inside the downloaded ZIP archive, which preserves quality without lossy recompression.
Is my image uploaded anywhere?
No. The image is read directly into your browser and split using the Canvas API entirely client-side. Nothing is sent to a server — the ZIP file is also assembled locally in your browser.
Will splitting lose quality compared to my original image?
No re-compression happens beyond the export step — each tile is cropped directly from the source image's pixel data and exported as PNG, a lossless format, so the only quality change comes from Instagram's own upload compression, the same thing that happens to any photo you post there.
My source image's dimensions don't divide evenly by the grid — what happens to the leftover pixels?
The tool calculates tile boundaries from the image's actual width and height divided by the number of columns and rows, so any remainder is distributed across the tile boundaries rather than being cropped off entirely — you won't lose a strip of the image, but tiles may differ by a pixel or two in size when the dimensions don't divide perfectly evenly.
Can I use a grid split for something other than Instagram, like a website banner or a printed poster?
Yes — the underlying operation is just cropping an image into equal tiles, which works for any use case that needs a large image broken into pieces, including a multi-panel print layout, a tiled website hero banner, or panels for a physical photo wall. Instagram's grid trend is simply the most common reason people reach for this specific tool.
Why does the tool number tiles left-to-right, top-to-bottom instead of in Instagram's actual posting order?
Numbering follows natural reading order for clarity and easy reference when you're looking at the preview, not the reverse order you'd actually upload in — since Instagram's grid shows newest posts first, you'll need to post starting from the highest-numbered (bottom-right) tile and work backward to tile 1, so the finished grid reads correctly once every tile is live.