Explode Image Into Pieces
Explode an image into a grid of pieces - PNG, JPEG, or WebP, with download-all-as-ZIP. Free, offline, client-side, instant, secure.
Split an image into a rows × cols grid for Instagram posts, jigsaw mock-ups, sprite sheets, or
tiled backgrounds. Pick the output format (PNG, JPEG, or WebP),
choose an edge-handling mode so no pixels are lost, and download all pieces at once as a ZIP.
How to Use Explode Image Into Pieces
- Upload an image. Click "Choose image" and pick any JPEG, PNG, WebP, GIF, or BMP up to 20 MB. The file is decoded locally - nothing is uploaded.
- Set rows and columns. Each slider goes from 1 to 20. Live preview updates 250 ms after you stop dragging.
- Pick an edge mode.
Extend(default) keeps all pixels: the last piece in each row and column absorbs any remainder when the image dimensions don't divide evenly.Truncatemimics the old buggy behaviour: every piece is the same size, but pixels on the right/bottom edges are silently dropped. - Pick an output format.
PNGis lossless and preserves transparency.JPEGis smaller but lossy and has no alpha.WebPis the smallest and supports alpha but only renders in Safari 14+. - Watch the live preview. Each piece shows its index and dimensions. Click "Save" on any tile to download just that piece.
- Download everything as a ZIP. Click "Download all as .zip" - the tool builds a store-only ZIP archive in your browser (pure-JS, no library) and saves it as
<filename>-pieces.zip. Each piece is named<filename>-<row>-<col>.<ext>.
Frequently Asked Questions
What is image splitting and what’s it for?
Splitting (sometimes “exploding”) slices one image into a rectangular grid of smaller pieces. Common uses: Instagram “grid posts” (3 × 3 or 3 × N rows that visually align across the profile), jigsaw puzzle previews, sprite sheets for 2D game animations, tiled CSS backgrounds, large posters that need to be printed across multiple sheets, and educational materials that introduce parts of an image incrementally.
What’s the difference between Extend and Truncate edge modes?
Extend floors the piece size for the first N−1 columns and lets the last column absorb whatever pixels are left over. Same for rows. So a 100-px image cut into 3 columns gives pieces 33, 33, 34 px wide – every pixel kept. Truncate uses the same floored size for every column; the last 1-2 pixels on the right (and bottom) are dropped. Extend is the natural choice for anything where you’ll reassemble the pieces or compare to the original; truncate matches certain legacy tools that expect identical-sized tiles.
What file formats are supported?
Input: anything the browser can decode (JPEG, PNG, WebP, GIF, BMP, SVG-rasterised). Output (per-piece): PNG (default, lossless), JPEG (smaller, no alpha), or WebP (smallest, alpha supported but Safari needs 14+). The download-all ZIP uses each piece’s selected format internally.
Can I create custom grid sizes?
Yes – both rows and columns are sliders from 1 to 20. Asymmetric grids like 1 × 4 (a horizontal panorama strip) or 6 × 2 (a tall Instagram series) work the same as square 3 × 3. The compute-grid logic accepts any positive integer up to 100 if you call it programmatically; the UI caps at 20 to keep the preview readable.
How does the “Download all as ZIP” work?
The ZIP is built in your browser using a tiny pure-JS encoder included in this tool – no library is loaded. It emits a “store-only” archive (no compression), since each piece is already a compressed PNG/JPEG/WebP. Each file gets a CRC-32 checksum, a local file header, and a central directory entry per the PKZIP spec. Standard unzip programs (Windows Explorer, macOS Archive Utility, unzip on Linux) all accept the output.
How big an image can I split?
The upload cap is 20 MB. Practical limits are about 100 megapixels (browser canvas size limit) and how much memory the preview can hold – a 9 × 9 grid of large pieces is fine, but a 20 × 20 grid of 4K pieces would lag on lower-end devices. Reduce the grid or downscale the source for huge inputs.
Does the tool preserve image quality?
For PNG output: yes, byte-for-byte lossless re-encoding (PNG itself is lossless). For JPEG/WebP: the canvas re-encodes at 92% quality – visually indistinguishable from the original but technically lossy. If you started from a JPEG and pick JPEG output, you’re double-encoding once, which adds a small additional loss. Pick PNG if you care about that.
Is my image uploaded to a server?
No. The page loads three static files (HTML, CSS, JS) and then everything runs in your browser – the File API decodes the image, canvas draws the pieces, the in-browser ZIP encoder packages them. Your image bytes never leave the device. No fetch, no XHR, no analytics, no cookies.
Is this tool free?
Yes – free, unlimited, no signup, no watermark. The pieces are yours to use anywhere. Attribution to is appreciated but not required.