WebToolVerseWebToolVerse

Image Splitter

Cut any image into a grid of tiles. Perfect for Instagram carousels and puzzles.

Drop or tap to split image

JPG, PNG, WEBP — any resolution

Processed entirely in your browser

Next steps

Resize image

Resize to exact pixel dimensions or pick from ready-made presets.

Compress image

Shrink images by up to 80% without visible quality loss.

Crop for social

Get pixel-perfect crops for Instagram, Facebook, X, LinkedIn, and YouTube.

Add watermark

Protect your images — add text or logo watermarks with full control.

View all tools →
Runs entirely in your browser. No uploads. Your files stay private.

Slice One Image Into A Grid Of Tiles With Canvas

Image Splitter divides a single image into equal-sized tiles arranged in a grid you specify. The implementation is straightforward: the source is decoded into an HTMLImageElement, drawn into an off-screen Canvas at native resolution, and each tile is extracted with the Canvas drawImage source-rectangle overload — no resampling, just byte-accurate pixel copies, which keeps every tile as sharp as the original.
Each tile is encoded with toBlob in your chosen format (PNG for lossless tiles with hard edges, JPEG for the smallest photos, WebP for the modern compromise) and assembled into a ZIP using a small in-page JavaScript zip implementation. Tiles can also be downloaded individually if you only need a few.
The grid is configurable in rows and columns independently, so you can create three-by-three Instagram grids, sprite sheet two-by-two splits, or twelve-row scrollytelling vertical splits. A live grid overlay shows the cut lines on the source image so you can see where each tile will land before clicking Split.
Edge handling is exact. If the source dimensions do not divide cleanly by the requested rows and columns, the rightmost column and bottom row pick up the remainder pixels. That keeps the output complete (no pixels are dropped) and matches how Photoshop's Slice tool handles uneven divisions.
Naming follows a predictable row-column scheme (tile_r1_c1.png, tile_r1_c2.png, and so on) so the tiles re-assemble correctly in alphabetical order — which matters for tools like Instagram's web upload, which sort attachments by filename.
There are practical limits. Very large grids on very large source images (think 100 megapixels split into 25 tiles) hold all the tile bitmaps in memory until the ZIP is assembled, which can choke mobile browsers. For poster-scale splits, do them on desktop or split in two passes by rows then columns.
Everything runs locally. The source file is decoded into an off-screen Canvas, every tile is encoded inside the same tab, and the ZIP is built in JavaScript before download. There is no upload step, no server-side image slicing pipeline, and the tool works offline once the page is cached.

Common Use Cases

01

Instagram three-by-three grids

Split a single panoramic image into a tidy 3x3 grid that posts in order to create a cohesive multi-tile profile feed.

02

Sprite sheets to individual frames

Slice a game sprite sheet into per-frame PNGs for animation tools, asset bundlers, or UI library imports.

03

Large-format poster printing

Split a high-resolution master into A4-sized tiles to print on a home printer and tape together as a poster.

04

Web mockup slicing

Cut a Figma export of a long landing page into per-section images for static newsletter HTML or email template development.

Frequently Asked Questions

Canvas drawImage with source rectangles copies pixels directly — no resampling, no quality loss. Each tile is a byte-accurate slice of the original at its native resolution.
Yes. Rows and columns are independent integers, so you can create 3x3, 2x4, 1x10, or any custom grid. Sane upper limits depend on your device's memory because every tile is held in RAM until the ZIP is built.
The rightmost column and bottom row pick up the remainder pixels so the output is complete. This is the same approach Photoshop's Slice tool uses and it ensures no source pixels are lost.
Both. The tool offers a single Download All button that builds a ZIP, plus per-tile downloads if you only need one or two.
JPEG, PNG, WebP, and any other format the browser decodes in an HTMLImageElement. AVIF input works in browsers that support it. HEIC needs converting first with HEIC to JPEG.
PNG (lossless and the safest default), JPEG (smaller, lossy), and WebP (typically smaller still). Pick PNG for screenshots and graphics, JPEG or WebP for photographic content.
No. The source is decoded into a Canvas in your tab, each tile is encoded locally, and the ZIP is built in JavaScript before download. There is no network call carrying image bytes.
tile_r{row}_c{column}.{ext} — for example tile_r1_c1.png. The naming sorts alphabetically into the same reading order as the source grid, which matches how Instagram sorts upload attachments.
There is no hard cap, but very large images split into many tiles can exhaust mobile browser memory because every tile bitmap is held in RAM. For 100 MP+ sources, split on desktop or do the split in two passes.
Yes for PNG and WebP outputs — alpha channels are preserved per-tile. JPEG output flattens alpha against a white background because JPEG has no transparency support.

Advertisement