Image Cropper
Crop to a fixed ratio or free-hand, straight from the source pixels. Up to 5 images per batch.
How to use
Load up to five images
Files appear in the queue below the workspace. Select one and the cropping surface opens with the full image and a draggable selection.
Pick a ratio, then drag
Choose Free, 1:1, 16:9 or 4:3 before you start. With a ratio locked the selection keeps its proportions no matter which handle you pull.
Process and download
The rectangle is applied to the original bitmap and the cropped region is written out as PNG, packed into a ZIP with the rest of the batch.
Key Features
Cropped from the source pixels
The selection is stored as coordinates in the original image's space and applied to the full resolution bitmap, so the output is as sharp as the source rather than an upscaled preview.
Ratio locks that hold
1:1, 16:9 and 4:3 constrain the selection while you drag any handle, which is considerably faster than trying to hit an exact proportion by eye.
Lossless PNG output
Cropping does not re-compress your image into a lossy format behind your back. The pixels inside the rectangle come out exactly as they went in.
Entirely in the browser
Selection and rendering both happen locally on a canvas. Nothing is uploaded at any point and the tool works with the network disconnected.
Transparency preserved
A PNG with an alpha channel keeps it through the crop, so cut-out assets can be trimmed without acquiring a background they did not have before.
Up to five in the queue
Load a small set and work through them one at a time, selecting each in turn. The batch caps at five to keep decoded bitmap memory within reasonable bounds.
Frequently Asked Questions
Does cropping reduce the quality of what is left?+
Can I crop all five images at once?+
Why does the workspace look empty when I load files?+
What do the aspect presets actually do?+
1:1 suits avatars and product thumbnails, 16:9 suits video thumbnails and slides, 4:3 suits print and older layouts.
Can I crop and convert in one step?+
Is there a size limit?+
Format Comparison
| Feature Specification | image cropping | Alternative |
|---|---|---|
| Crop is taken from | Full resolution source | On-screen preview |
| Resulting sharpness | Identical to source | Softened by upscaling |
| Output format | Lossless PNG | Often re-compressed |
| Transparency | Preserved | Often flattened |
| Where it runs | Entirely in your browser | Uploaded and processed remotely |
Technical Overview & Specifications
Deep dive into image cropping architecture and processing.
Show DetailsHide Details
Technical Overview & Specifications
Deep dive into image cropping architecture and processing.
Platform Overview
Cropping sounds like the simplest operation in image editing and it is the one most tools quietly get wrong. The mistake is cropping the version of the image that is on screen. Your browser is showing a downscaled preview, so a crop taken from those coordinates is a crop of a smaller picture, and the result has to be scaled back up to something usable. That is how you get a crop that is softer than the original for no reason anybody can explain. This tool records the crop as a rectangle in the source image's own coordinate space and applies it to the full resolution bitmap at processing time, so a crop of a 4000 pixel wide photograph produces genuinely full resolution output.
You get a free-hand crop plus locked ratios at 1:1, 16:9 and 4:3, which between them cover most of what people actually need: square for avatars and marketplace thumbnails, 16:9 for video thumbnails and slide backgrounds, 4:3 for print layouts and older display conventions. Output is PNG, because a cropping tool that quietly re-compressed your image would be doing something you did not ask for. Up to five images can be loaded at a time, though the crop rectangle applies to whichever one you have selected, so this is best used as a considered per-image operation rather than a bulk one.
Why source-space coordinates matter
The cropping interface is built on Cropper.js, which reports the selection in the coordinate system of the image it was given rather than the coordinate system of the element on screen. Those two differ whenever the image is displayed at anything other than 100 percent, which is essentially always for a photograph from a modern camera. The selection is read with rounding applied and stored against the image in the batch as a simple rectangle of x, y, width and height. Nothing is rendered at that moment; the crop is a piece of state, not an operation, which is why you can adjust it repeatedly with no accumulated loss.
The actual crop happens in the worker at processing time. The source file is decoded to an image bitmap at full resolution and drawn to an OffscreenCanvas sized to the crop, using the nine-argument form of drawImage that takes both a source rectangle and a destination rectangle. The source rectangle is your stored crop, the destination is the whole canvas. One draw call, no intermediate scaling, no resampling of pixels that are simply being copied. Very large images are first passed through a working buffer that respects the maximum canvas dimensions browsers enforce, which is what keeps an 8000 pixel source from silently producing a blank result on hardware with a lower ceiling.