AutoCrop

Auto crop images, one or a hundred

Auto-cropping means the rectangle is computed from your pixels rather than dragged by hand. Drop one image or a hundred above: each is scanned for its content bounds, cropped, and made available individually or as a single ZIP.

This page is about doing it at volume — asset exports, icon sets, sprite frames — including the case where cropping each image independently is exactly the wrong thing to do.

Drop image here

or

PNG, WebP or JPG · up to 50 MB · you can also paste from the clipboard

Your images are processed locally in your browser.

How batch cropping works here

Select or drop any number of files. They appear as a list, each with its own status, and are processed sequentially rather than all at once — decoding twenty large PNGs in parallel is the quickest way to make a browser tab run out of memory. One image is decoded, scanned, cropped and encoded; then the next.

Every image gets its own bounding box. Padding and threshold are global: change either and the entire batch is recomputed, so you can dial in a setting against one preview and trust the rest. A file that fails — unsupported format, over 50 MB, no visible content — is marked in the list with the reason and does not stop the others.

When you are done, Download all packs the results into autocrop-images.zip. The archive is assembled in the tab; nothing is uploaded to build it.

Where bulk auto-cropping pays off

WorkflowWhy trimming helpsWatch out for
Sprite sheet framesPackers work far better with tight frames — less wasted atlas space and smaller textures.Trim the frames, never the assembled sheet. Record each frame’s offset if the animation depends on registration.
Icon libraries before packingAn icon font or SVG sprite wants tight glyph bounds so optical sizing is consistent.Trim the source artwork, then export at fixed sizes — do not trim the exported fixed-size files.
Design-tool asset exportsA whole folder of frame-sized PNGs becomes a folder of content-sized PNGs in one pass.Check whether any of the padding was an intentional safe area.
3D render passesRenders sit on a fixed camera resolution, so most of the frame is usually empty.Multi-pass renders must be trimmed identically or the passes stop aligning.
Stickers, emoji, avatarsDisplay size is tiny, so every wasted transparent pixel is visible as a smaller subject.Some platforms require exact dimensions — add padding back after trimming.
Repository hygieneStops oversized transparent canvases from being committed and re-downloaded forever.Do it once, deliberately, not as an automatic pre-commit hook.

The trap: per-image bounds break fixed grids

This is the one thing that catches people out. Auto-cropping gives every image the tightest possible box for that image. Feed it twenty 24 × 24 icons and you get twenty different sizes, because a wide icon and a tall icon have genuinely different content bounds. Drop those into a fixed grid and the optical sizing falls apart — the trimmed circle now appears larger than the trimmed square next to it.

The right order is: trim first, then normalise. Trim the artwork to content, then export or place each one inside a consistent square with a known margin. Padding here adds the same amount to every image, which gives consistent margins but not consistent outer dimensions — so for a strict grid, do the final sizing in your design tool or build step.

When to use a command line instead

A browser tab is the right tool for a folder you are handling once, on a machine you do not want to install anything on, with files you would rather not upload. It is the wrong tool for something that has to run on every build.

For CI, a pre-commit hook or a nightly asset pipeline, use ImageMagick — it trims the same way, takes a threshold via -fuzz, and scripts cleanly. The command and the one flag everyone forgets are written up separately.

Bulk auto-cropping: questions

How many images can I auto-crop at once?
There is no fixed cap. Files are processed one after another so memory stays flat, and each is released once cropped. Dozens are routine; hundreds of large files will simply take longer, and the tab stays responsive while it works.
Are all the images cropped to the same size?
No. Each image is cropped to its own content, so results usually differ in size. That is what you want for sprite frames and asset exports, and what you do not want for a fixed-size icon grid.
How are the files named in the ZIP?
Each keeps its original stem with -cropped appended, so logo.png becomes logo-cropped.png. If two inputs would produce the same name, a numeric suffix is added so nothing is silently overwritten.
Does batch processing send anything to a server?
No. The ZIP is built in your browser with JSZip and handed to you as a download. No file, and no file name, is transmitted anywhere.
Can I change padding or threshold after cropping a batch?
Yes. Both controls apply to every loaded image at once and the whole batch is recomputed, so you can settle on a setting while watching one preview and the rest follow.