How is this different from an even N x M grid splitter?

This tool lets you specify exact pixel positions for each cut on the x and y axes, so rows and columns can be different sizes — useful for lining cuts up with meaningful boundaries like a button's edge or a header's bottom, unlike an even-grid splitter.

Do cut positions need to be in order?

No. Cut positions are deduplicated and sorted internally, so the order you enter them in, and any duplicates, don't affect the result.

What cut values are valid?

Every cut must be a whole number strictly between 0 and the image's width (for x cuts) or height (for y cuts); a cut at 0, at the full width/height, or a non-integer value is rejected.

What if I don't enter any cuts on one axis?

Leaving an axis empty produces a single row or column spanning the full height or width on that axis, so entering no x cuts and one y cut, for example, gives you two full-width horizontal strips.

PNG Slicer - Cut a PNG at Custom Pixel Positions Online

Overview

Introduction

This tool slices a PNG at custom pixel positions you choose, entirely in your browser, rather than forcing an even grid.

It's built for the classic web-mockup slicing workflow, where cuts need to land precisely on meaningful boundaries.

What Is PNG Slicer?

A client-side tool that takes lists of x and y pixel positions and cuts the image into a grid of rectangular slices at exactly those positions, reusing the site's existing crop lib function for every resulting cell.

Unlike an even-grid splitter, rows and columns produced by this tool can be any size, since you control precisely where each cut falls.

How PNG Slicer Works

The tool validates that every x and y cut is a whole number strictly between 0 and the image's width or height, then deduplicates and sorts the cuts to build a list of boundaries (0, each unique cut, and the full width/height).

For every row and column formed by consecutive boundaries, it calls the existing crop lib function to extract that rectangular region, building up a 2D grid of slices ordered by row then column.

When To Use PNG Slicer

Use it to slice a UI mockup or design comp into individual asset pieces (buttons, icons, header images) along their exact edges.

It's also handy for splitting a sprite sheet or scanned document into unevenly-sized meaningful sections.

Often used alongside PNG Dimensions Finder, PNG Rotator and PNG Transparency Checker.

Features

Advantages

Runs entirely client-side; the uploaded image never leaves your device.
Cuts can be placed at any pixel position, producing unevenly-sized slices unlike a fixed grid splitter.
Cut order and duplicates in your input don't matter, since they're deduplicated and sorted automatically.

Limitations

Every cut must be strictly inside the image bounds; a cut at exactly 0 or at the image's full width/height is rejected as redundant.
Only whole-number pixel positions are supported; fractional cut positions aren't allowed.

Examples

Slice a mockup into a 3-column header layout

Input

A 900x200 PNG, xCuts = [300, 600], yCuts = []

Output

Three 300x200 PNG slices arranged left to right

Two x cuts at 300 and 600 divide the image into three equal columns since no y cuts were given.

Slice out an uneven button region

Input

A 400x400 PNG, xCuts = [120, 280], yCuts = [50, 90]

Output

A 3x3 grid of 9 PNG slices with unevenly-sized rows and columns

Because cuts land at custom pixel positions instead of even intervals, the resulting rows and columns have different widths and heights, matching real design boundaries.

Best Practices & Notes

Best Practices

Zoom into your source mockup first to identify exact pixel boundaries before entering cut values.
Enter cuts as a comma-separated list; duplicate or out-of-order values are handled automatically so you don't need to sort them yourself.

Developer Notes

The lib function operates on a plain Uint8ClampedArray PixelBuffer with no DOM dependency: it builds sorted boundary arrays via buildBoundaries (deduplicating cuts and adding 0 and the full width/height as implicit boundaries), then calls the existing cropPng lib function once per grid cell to produce the PixelBuffer[][] result, returning an error if any cut is non-integer or falls outside the open interval (0, size).

PNG Slicer Use Cases

Slicing a web design mockup into individual button and icon assets
Splitting a sprite sheet into unevenly-sized frames
Cutting a scanned multi-panel document into separate images

Common Mistakes

Entering a cut value equal to 0 or the image's full width/height, which is rejected since those are already implicit boundaries.
Entering a decimal cut position — only whole-number pixel positions are accepted.

Tips

Leave one axis's cuts empty when you only need to slice along a single direction (all rows or all columns).
Use the dimensions finder tool first to confirm the exact width and height you're slicing within.

PNG Slicer