Image Splitter

The poster was gorgeous. It was also 42 inches wide, and the office printer tops out at A4. So the plan became the classic one: slice the artwork into a grid of letter-sized sheets, tape it together on the wall, and step back. The next twenty minutes were spent in an image editor drawing guides, guessing crop boundaries, exporting one piece at a time with names like final_v2_TOPLEFT_maybe.png, and losing track of which piece was which.

That afternoon is why this page exists. The Image Splitter takes any image and cuts it into a grid — rows and columns, your call — then hands you every piece as a numbered file in one ZIP. Set 3 columns by 3 rows for nine tiles. Set 4×1 for four vertical strips. Set 1×6 for six horizontal bands. No guides, no per-piece exports, no naming confusion, because the tool names them in reading order and the numbers never lie.

The use cases keep surprising us. Print shops splitting large-format jobs into tiles. Game developers cutting sprite sheets into individual frames. Teachers turning maps into jigsaws. People chopping screenshots into emoji-sized pieces for a Discord server. The Instagram Grid Splitter handles the social-specific version with its own presets; this tool is the general-purpose blade behind all of it.

1. 1

   Load the source image

   Drag it in, paste from the clipboard, or pick from your camera roll. The tool reads JPG, PNG, and WebP and shows the exact pixel dimensions — you will want those numbers for the grid math.

2. 2

   Set columns and rows

   Two number inputs, nothing fancy. The preview overlays the cut lines on your image so you can see exactly where each slice lands before committing. Watch whether a cut crosses a face, a headline, or anything else that should stay whole.

3. 3

   Check the tile dimensions

   The tool shows the size each tile will be. If you need exact numbers — 400-pixel tiles for a sprite sheet, 210mm-wide tiles for A4 printing — adjust the grid until the math lands where you need it.

4. 4

   Choose the output format

   PNG for transparency and lossless text, JPG for smaller photo tiles, WebP when you want both. The format applies to every tile in the batch.

5. 5

   Download the ZIP

   One click, one archive, every tile numbered in reading order: row 1 left to right, then row 2, and so on. Extract and the pieces are ready to upload, print, or paste.

An image is a grid of pixels W wide and H tall. Splitting into C columns and R rows means each tile covers a rectangle from (x0, y0) to (x1, y1), where x0 equals the column index times floor(W/C) and x1 starts the next tile. It is the same arithmetic that decides background positions in CSS sprite sheets, which is one reason developers keep this tool bookmarked.

The subtle part is remainders. 1600 pixels across 3 columns does not divide cleanly: 1600 ÷ 3 is 533 with 1 left over. The tool gives the extra pixel to the first column, producing widths of 534, 533, and 533. Visually irrelevant — but if you are assembling tiles back into a sprite sheet and expecting every frame at an identical size, that one pixel will offset everything after column one. The fix is to crop the source to a multiple of your column count first, which the Image Cropper does in seconds.

Numbering runs in reading order because that is what humans expect when reassembling. Tile r01-c02 is the second tile in the first row: one column in from the left, zero rows down. The zero-padded naming looks fussy until you sort a folder of a hundred tiles alphabetically and everything lines up — which is precisely why the padding is there.

The ZIP itself is built in the browser from the finished tiles. Each image is encoded to its target format, the entries are named, and the archive is assembled following the standard ZIP file layout — one central directory, one entry per tile, no server round trip anywhere in the chain.

Here is a concrete run with clean numbers. Source image: 1620×1080. Grid: 3 columns, 2 rows. Each tile is exactly 540×540, because 1620 ÷ 3 and 1080 ÷ 2 both land on integers — this is what ideal split math looks like.

.sprite {
  width: 270px;
  height: 270px;
  background-image: url('sheet.png');
  background-size: 810px 540px;   /* sheet at 50% */
  background-position: -270px 0; /* tile r01-c02 at 50% */
}

Notice what the sprite example is really showing: splitting and reassembling are the same operation in reverse. The cut coordinates you see in the table above are exactly the background-position values you would need to pull any tile back out of the combined sheet. That symmetry is why game developers and front-end developers both live in this tool.

The remainder run is worth reading beside the clean one above it. One extra pixel changes every coordinate to the right of column one — invisible to the eye, decisive for background-position math. That single pixel is the entire argument for cropping the source to a grid-friendly size before splitting when the tiles feed code rather than a wall.

Splitting a sprite sheet into frames with mathematically perfect cuts produces one classic bug: thin slivers of the neighboring sprite along each frame's edge. The cause is texture filtering. When a game engine draws a sprite at any scale other than exactly one-to-one, bilinear sampling reads the pixels just outside the frame's rectangle — and when frames sit flush against each other, the pixels just outside belong to the sprite next door. The fix is padding: dead space between frames, so the sampler reads harmless transparent pixels instead of somebody else's sword.

The coordinate arithmetic shifts with the padding, and that is the part worth practicing. In the 2-pixel atlas, frame row 2 column 1 starts at x = 0, y = (2 − 1) × (256 + 2) = 258 — the stride is frame size plus padding, not frame size alone. Sprite tools and game-engine importers all want that stride; splitting back out of a padded atlas with a grid that assumes 256 exactly will shave the padding off the wrong edge of every frame after the first.

Two adjacent refinements from production art pipelines. Edge extrusion — copying each frame's outermost pixel row into the padding — buys the same protection for sprites that will tile or rotate, because the sampler reads a continuation of the sprite rather than transparency. And mipmaps widen the sampling footprint at every halving step, so a sprite that shrinks to a quarter on screen is being sampled four texels wide at the deepest mip — which is why 4 pixels of padding is the conservative default whenever the atlas will be scaled aggressively on mobile screens.

Print is the most common reason a split leaves the screen, and the arithmetic deserves one full walkthrough. The job: an A2 poster — 420×594 millimeters — on a printer whose sheet size tops out at A4. Exported at 150 DPI, the artwork is 2480×3508 pixels, and A4 is exactly one quarter of A2: two columns by two rows, every tile 1240×1754 pixels, no remainder anywhere. The split itself takes one click; the rest of the afternoon belongs to the scissors.

Why 150 DPI and not 300: a wall poster is read at a distance nobody reads a magazine at, and large-format output tolerates the lower figure without visible degradation. The same poster at 300 DPI would be 4960×7016 pixels — 35 megapixels of file buying sharpness that a viewer standing a meter back cannot resolve. Print-shop convention splits the difference by viewing distance: 300 for handheld, 200 for arm's length, 150 for the wall.

Assembly math closes the loop. A 2×2 tiling has exactly one vertical and one horizontal internal seam; printing with a 5-millimeter overlap on the joining edges produces glue flaps that absorb the millimeter of drift consumer printers add per sheet. Four sheets, two seams, one ruler — and the poster is on the wall by five o'clock.

Splitting is simple arithmetic, which means the failure modes are all predictable — and all avoidable once you can name them.

• Odd dimensions. 1921×1080 into two columns gives one 960-pixel tile and one 961. Crop to even numbers when uniformity matters, or accept the single-pixel drift.
• Cut lines through content. A 3×3 grid does not know where the subject's face is. Use the preview overlay and nudge the crop before splitting, or pick a grid that puts joints in low-detail areas like sky and pavement.
• Print drift. Consumer printers are not precise instruments. Two tiles that meet mathematically at a shared edge will show a hairline gap or overlap on paper. Bleed and overlap settings exist for exactly this — a 5mm overlap per tile absorbs the drift.
• Transparency surprises. A JPG source cannot have transparent regions, but PNG tiles inherit any transparency from a PNG source, which can make tiles look broken against a dark file manager. Preview on white and on checkered to be sure.
• Re-compression. Splitting to JPG re-encodes every tile. For text-heavy screenshots and sprite frames with hard edges, choose PNG; the artifacts JPG leaves on sharp edges are subtle but permanent.

The same operation, precomputed for the jobs that recur. Source sizes assume finished dimensions — resize or crop the source to match before splitting, and every tile comes out identical:

Every row shares one property: the source divides evenly by the grid, which is why the tiles come out identical. The social rows come from the Instagram sibling of this tool with its presets; the print rows come from DPI arithmetic; the sprite row from frame counts. When your job is not on the table, derive it the same way — destination size times grid equals source size, and any remainder means a crop comes first.

A tool this simple ends up in a lot of different hands. The regulars:

• Print shops and sign makers — cutting oversized artwork into printable panels, adding overlap for assembly
• Game developers and front-end teams — pulling individual frames out of sprite sheets, or building sheets from a single tall animation strip
• Social media managers — prepping grid posts and carousel sets, often via the Instagram-specific sibling of this tool
• Teachers and workshop leaders — turning maps and diagrams into physical jigsaws and matching games
• Crafters — splitting cross-stitch patterns and paper models into working sections
• Community moderators — chopping reaction images and screenshots down to emoji-sized pieces for Discord servers

The workflow pattern repeats across all of them: one big source, one grid, many numbered outputs. When the flow runs the other way — many sources becoming one image — that is the Image Combiner, and the two tools pair up nicely for assembling strips back into sheets after edits.

People sometimes ask which of the three cutting tools they are standing in front of. The distinctions are small but they save an afternoon:

There is also the question of grid versus strips. A 3×1 column split and three sequential crops produce identical files, but the split is one operation with consistent naming, while manual crops are three operations with human-named outputs. Multiply by a 6×4 sheet — 24 pieces — and the manual route stops being a plan. Batching is not a luxury here; it is the difference between a five-minute job and a spreadsheet-tracked one.

For anyone cutting images for the web, a quick note on size discipline: tiles destined for sliders and carousels should still come out of the Image Resizer pipeline if the source is oversized. Splitting a 6000-pixel image into 2000-pixel tiles wastes bandwidth on every tile; resize first, then split, so each piece ships at the size it will actually display.

Everything on this page runs client-side. The decode, the tile cuts, the format encoding, even the ZIP assembly — all of it happens in your browser using the canvas and file APIs the platform already provides. There is no upload endpoint, because there is no server component at all.

For print shops handling customer artwork before it is public, and for game studios slicing unreleased assets, that is the whole feature list. The file you split is the file that stays on your disk. It also means the tool keeps working with no connection once the page is loaded, on a locked-down studio machine, or on a phone in a basement — the network tab stays silent either way.

Splitting is half a workflow. These are the other halves, depending on which direction you are headed:

• Instagram Grid Splitter — the social preset version, with 3×3 and carousel tile sizes and upload-order numbering
• Image Combiner — the reverse operation: merge tiles or photos back into one image, horizontally, vertically, or in a grid
• Image Cropper — the single-region version when you need one precisely placed piece instead of all of them

A common loop: split a sheet into tiles, clean up individual pieces, then combine them back. Splitter out, combiner home. Both tools speak the same file formats, so nothing gets converted in between.