Planning a grid post, and slicing long images
Cutting one image into pieces serves two jobs that have almost nothing in common. In the first, the pieces are posted separately and only read as one picture when somebody looks at a profile page. In the second, the pieces are meant to be read one after another, and the whole point is that the cut is invisible. Getting the settings right depends entirely on knowing which of the two you are doing.
How a grid post actually assembles
A profile grid is a mosaic of the most recent posts, laid out three to a row. There is no platform feature called a grid post — the effect is produced by uploading parts of one image as separate posts and letting the profile page arrange them.
Two conditions have to hold for it to line up:
- The whole image must be square before it is cut. Each tile is displayed as a square, so a tile cut from a non-square image gets cropped by the platform on its own terms — usually by trimming the left and right edges — and the seams no longer meet.
- Every tile must be the same size. A grid cut from a 2000-pixel square into three columns gives tiles of 667, 666 and 667 pixels if the rounding is done naively, and the one-pixel difference shows up as a visible jog along the seam. Reducing the crop to 1998 pixels first gives three identical 666-pixel tiles.
The posting order is usually the reverse of the reading order
This is the part that catches people out. The newest post occupies the top-left cell, and older posts shift right and down. So if you upload the tiles in reading order — top-left first — the last tile you post lands in the newest position and the whole picture comes out mirrored.
To get a grid that reads left to right, top to bottom, post the tiles in reverse: bottom-right first, top-left last. The top-left tile is then the newest post and takes the top-left cell.
Planning the image so nothing important lands on a seam
When the tiles are viewed as a grid the seams are nearly invisible, but there are two places they still show: the platform usually leaves a thin gap between cells, and it recompresses each tile separately. Both punish the same thing — fine detail that runs across a boundary.
| Works well across a seam | Fails across a seam |
|---|---|
| Large flat areas of colour; a continuous gradient; an object that happens to be symmetrical about the seam | Text of any size, especially small text; a thin rule or border; a face; a logo's fine edge; a diagonal line |
The practical fix is to plan for a margin. Treat a band about five percent of the width on each side of every seam as unusable and keep content out of it. On a 3×3 cut of a 1998-pixel square that is roughly a hundred pixels per side — not much, but enough to stop a word being sliced in half.
It also helps to design the image for the layout rather than retrofitting the layout onto a finished image. Nine panels that each contain a complete element read better than one large graphic chopped into nine, and the second version is what people usually try first.
What the platform does to your tiles afterwards
Each tile is uploaded and recompressed independently. Compression artefacts concentrate around high-contrast edges, so a hard-edged graphic placed right at a seam produces ringing on both sides of it — visible as a faint halo that does not exist in the original. Flat colour and soft gradients compress cleanly and keep the seams quiet.
Each tile is also a separate post, which means nine captions and nine opportunities for someone to interact with a fragment. If the grid is promotional, the first caption has to carry the message, because the other eight will be seen by almost nobody.
Slicing a long image so it stays readable
The other job is the opposite one: the pieces are read in sequence and the cut has to disappear. Long screenshots are the usual case, and there are three reasons to slice them at all.
- Messaging apps downsample large images. A very tall screenshot gets scaled down until the text is unreadable. Slicing into normal-proportioned pieces keeps each one above the threshold where downsampling kicks in.
- Email clients and some forms refuse or resize tall images. Several pieces each fit comfortably.
- Printing. A long image scaled to a single page becomes a strip of illegible text; sliced to the paper's proportions it stays legible.
Choosing the strip height
Cutting into equal parts is fine when the content has no structure. When it does, cut at the structure: a strip should break between sections, not in the middle of a sentence or a table row. That means working out the number of parts from the content rather than picking a round number.
For printing, match the paper's aspect ratio instead. A4 is roughly 1:1.414, so a 1080-pixel-wide screenshot wants strips about 1527 pixels tall. A 13,500-pixel-long screenshot is 8.84 of those, so nine strips of 1500 pixels each — close enough to the ratio that each one fills a page without a large empty band.
Use overlap when a human reads the pieces, never otherwise
Overlap repeats a band of pixels at the top of each strip, taken from the bottom of the previous one. Set to about twenty to sixty pixels it does one useful thing: if a line of text does land on a seam, the missing strip of letters appears at the top of the next piece, so the reader can still recover the sentence.
Overlap is actively harmful in the other two cases. For a grid post it breaks the alignment. For reassembling the image later it makes exact reconstruction impossible, because the pieces no longer tile the original. Set it to zero unless a person is going to read the strips in order.
Keep the resolution and the order
Split at the original resolution and let the pieces be whatever size they come out. Resizing during a split throws away detail that cannot be recovered, and it is the reason some slices look soft while the original was sharp. Reassembling works only if the resolution never changed.
Name the output so the order survives. The tool numbers tiles left to right and top to bottom, which is the reading order, and a zero-padded two-digit number keeps them sorted — tile-01 through tile-09 sorts correctly, whereas tile-1 and tile-10 do not. If the pieces are going to be sent to somebody else, the numbering is the only thing telling them what order to read in.
Grid or strips, adjustable overlap, optional crop to a square that divides evenly, and a plan box showing every cut line before you generate anything. Runs in your browser.
Checklist
For a grid post
- Is the source image square, or do you want it centre-cropped to square?
- Did every tile come out exactly the same size?
- Is all text, and every logo edge, clear of the seam bands?
- Do you know whether the platform inserts new posts at the top-left, and are you posting in the matching order?
- Does the first caption carry the message on its own?
For slicing a long image
- Is overlap set to zero if the pieces will be reassembled or posted as a grid?
- Is overlap set to twenty to sixty pixels if a person will read the strips in sequence?
- Do the cuts fall between sections rather than inside a sentence or a table row?
- Are the strip proportions close to the paper's, if they will be printed?
- Are the filenames zero-padded so the reading order survives?
Frequently asked
Why do my grid tiles not line up?
Almost always because the source image was not square. Each cell is square, so a tile cut from a wider image is cropped by the platform when it is displayed, and the crop is not the one you would have chosen. Cropping to a square before cutting is what fixes it.
Can I put the tiles back together into the original image?
Yes, if overlap is zero and the output resolution is unchanged, because the tiles cover the image exactly with no gaps and no repeats. If the output was JPEG, the reassembled result is geometrically identical but not byte-identical, since JPEG compression is lossy.
How many tiles should I use?
Three by three is the common choice because it matches the grid, but any even division works. The constraint is legibility: a tile that is too small to read on a phone defeats the purpose for a strip, and for a grid post the limit is how many separate posts you are willing to publish.
Does the tool upload my image in order to split it?
No. The cutting is done with the browser's canvas, on your device, and the image is never transmitted. You can disconnect from the network after the page loads and it will still work.
What is the best output format for tiles?
PNG if the tiles contain text, flat colour or sharp edges, because it is lossless and avoids ringing around high-contrast detail. JPEG is smaller and fine for photographs. WebP compresses better than both but is not encodable in every browser, so the tool only offers the formats the current browser can genuinely produce.