Image Cropper
Crops in your browser, with the ratio presets that exist for a reason, number fields as well as dragging, and the share of the original pixels you are keeping.
Cropping looks like dragging a box and is mostly two constraints fighting each other. The box has to stay inside the image, and if the ratio is fixed it has to keep that ratio, and satisfying one can break the other: dragging the corner of a 16:9 box towards the edge of a portrait photo has to stop at whichever limit comes first.
Getting that wrong produces a crop with a strip of nothing along one edge, which nobody notices until they look at the export. So the arithmetic here is a tested module rather than event handling, and the tool reports what the crop actually is: its size, its reduced ratio, and what share of the original pixels survive.
The ratio presets each exist for a reason, which is written next to them. 4:5 is the tallest an Instagram post can be. 1.91:1 is what Open Graph asks for. 3:2 is a 35mm frame.
How to use
- Open an image. It is decoded in your browser and never uploaded.
- Pick a ratio, or leave it free. “Largest of this ratio” centres the biggest box that fits.
- Drag to position it, or use the number fields, which are the accessible way to do the same thing.
Example
A 4000 by 3000 photograph cropped to 16:9:
Crop 4000 × 2250
Ratio 16:9
Megapixels 9 MP
Kept 75% of the original pixelsThe same photograph cropped to a 1920 by 1080 region keeps 17.3 percent of the pixels, which is the number worth seeing before deciding that a crop is free.
Pitfalls
A crop only removes pixels. It cannot add detail. A small crop enlarged is a small crop enlarged, however good the screen it is viewed on.
Check the pixel count, not the ratio. A 16:9 crop of a phone photo can still be too small for a hero image. The megapixel figure is there for that.
A fixed ratio shrinks rather than overflows. Asking for 16:9 in a portrait image gives a short, wide box. That is the only correct answer, and it surprises people.
The export is a PNG. Lossless, and larger than the JPEG that went in. Run it through the compressor if it is going on a page.
Metadata is not preserved. Redrawing through a canvas drops EXIF, including orientation and location. That is usually a feature and occasionally the reason a photo comes out rotated.
Faces near the edge are a trap. Crop to the subject, not to the frame. The rule of thirds grid is there to make that visible, not to be obeyed.
HEIC images will not open in most browsers. Only Safari decodes them. Convert first, or use a different file.
Compatibility
Runs in the browser. createImageBitmap decodes the file and a canvas draws the crop, both of which work in
every current browser. Nothing is uploaded and nothing is stored.
The geometry is a pure module, tested at the cases where the two constraints conflict: the largest box of a ratio in both orientations, a box dragged past an edge, a box larger than the image, and a ratio change that has to shrink to stay inside. All results are whole pixels, since a crop is a rectangle of pixels rather than a region of a coordinate space.
The ratio summary is reduced by the greatest common divisor rather than matched against a list, so an unusual crop reports 1000:763 instead of being rounded to something recognisable.
The number fields and the drag act through the same clamping, which is why they cannot disagree about where the box is.