The practical answer
Open the visual creation tool, choose Nine-grid Split, upload one image and download the ZIP. Check the center crop first, then reconstruct 1.png through 9.png in three columns. The numbers describe tile positions from top left to bottom right; your publishing platform may display posts in a different order.
Work out the square before splitting
For an image of width W and height H, the crop side is the smaller dimension. The tool removes (W−side)/2 from each horizontal edge and (H−side)/2 from each vertical edge. Use this to locate faces, labels and text before uploading. Cropping changes the visible picture, while compression changes file size; the pixel and aspect-ratio guide helps separate those requirements.
Consider this original size example, rather than a sharpness benchmark: a 3600×2400 landscape image loses 600 pixels from each side. Its central 2400px square produces source tiles of 800×800. Each exported tile is 1080×1080, but resizing cannot recover texture that the source never contained.
| Original | Retained area | Check first |
|---|---|---|
| 3600×2400 | Centered 2400×2400 | 600px removed from each side |
| 2400×3600 | Centered 2400×2400 | 600px removed from top and bottom |
| 2400×2400 | Whole square | Important details crossing a grid line |
Export one prepared master
- Keep the original. Inspect the complete photo locally and confirm the subject fits in its central square. Prepare a square in an image editor first if you need an off-center composition.
- Open the visual creation tool, select Nine-grid Split and upload your prepared image. Check the composition in the preview; the displayed preview size is not the source resolution.
- Choose Download nine-grid ZIP. Extract nine-grid.zip into an empty folder so an earlier export cannot be mistaken for the new result.
- Confirm files 1.png through 9.png exist. Reconstruct them locally before deciding the upload order for your platform.
Use coordinates instead of similar thumbnails
The top row is 1, 2, 3; the middle row is 4, 5, 6; the bottom row is 7, 8, 9. Sky, walls and other repeated backgrounds can make individual thumbnails almost indistinguishable. For a first trial, use a disposable test image with a different number in each cell and establish which way the numbering runs.
A common ordering mistake
Upload files 1 through 9 and assume the profile will reconstruct the original.
Rebuild rows 1/2/3, 4/5/6 and 7/8/9 locally, then check a draft or preview in the destination platform.
Inspect seams and individual tiles
Arrange the nine tiles without gaps and check that edges join continuously. Then inspect each tile on its own. A face, title, QR code or product label crossing a boundary may lose meaning when separated. Return to the master composition if a critical element straddles a cut; stretching individual tiles is unlikely to produce a coherent grid.
A continuous reconstruction also does not prove that every tile works as a standalone post. A visual story may tolerate a background-only tile, whereas product instructions may need meaningful content in every frame. As in the frame-by-frame GIF crop check, inspect both the whole and its parts.
Four handoff checks
- Exactly nine PNG files, numbered 1 through 9 with no gaps or duplicates.
- Every file opens and measures 1080×1080 pixels.
- Row-by-row reconstruction preserves the subject, orientation and seams.
- A destination preview confirms placement; local numbers are not a platform ordering guarantee.
Problems that require a different master
This splitter has no draggable crop focus or separate aspect-ratio control for each tile. If the centered square excludes the subject, prepare a suitable square before uploading. Enlarging a small image still looks soft, and the destination may compress uploads further. Inspect its final display as well as the local files.
The Canvas drawImage documentation distinguishes the source rectangle from the destination dimensions. That is why a 1080px output is different from 1080px of original detail. The browser must be able to decode the input. If a damaged or oversized file fails, try a smaller local copy. Test the workflow with a non-sensitive sample before using personal photos.
Common questions
Why did a person at the edge disappear?
The tool takes a centered square: landscape images lose their sides and portrait images lose their top and bottom. Recompose or extend the canvas locally before splitting; this interface cannot move the crop focus.
Should I publish the tiles in reverse order?
That depends on the destination’s current ordering and display. Check a draft or a small trial instead of treating a fixed upload sequence as universal.
Will an 800px source become sharper at 1080px?
More output pixels do not create original detail. Inspect enlarged edges and text. Use a higher-resolution master when the task requires more detail.
Further reading & sources
Put the guide into practice
Open the relevant tool, preview the result and check your exported file.
