Skip to content
HexSlate

Image Cropper

No image yet

Drop one above. Drag the box or use the arrow keys; the output size is live.

The crop is in fractions, not pixels

The box you drag is stored as a share of the image (x, y, width and height between 0 and 1) and only becomes pixels inside the worker, against the full-resolution decode. That is the difference between a crop that lands where you put it and one that drifts. A cropper that records the box in preview pixels and applies it to a 6000px original is off by whatever the preview scale happened to be, and the error stays invisible until you look closely at the edge.

It also means the preview can be any size the layout wants. The image above is scaled to fit your window; the export is cut from the original at full resolution, and the pixel dimensions shown while you drag are the real output dimensions, not the preview's.

Aspect ratio locks are trickier than they look

A 1:1 crop is not a square in fractional coordinates. On a 3:2 photograph, a box that is 0.5 wide and 0.5 tall covers 1500 by 1000 pixels, which is 3:2, not 1:1. Holding a ratio means solving against the image's own aspect ratio, and it is why ratio locks in simple croppers so often hand back output that is nearly, but not quite, the shape you asked for.

Touch and keyboard both work

A meaningful share of image traffic is on a phone, and a crop tool that needs a mouse is worthless there. The box and all four corners use pointer events with capture, so a finger that outruns the box keeps dragging it rather than dropping it.

They are also real buttons. Tab to the box and the arrow keys move it; tab to a corner and the arrow keys resize from that corner, with the opposite one held in place. Shift makes every step ten times larger. A generator that can only be driven by dragging excludes anyone who does not use a mouse, which is not a small group.

Common problems

  • Rotate and flip do not affect the saved file. They are preview transforms here, applied with CSS so they cost nothing. The export is the cropped region of the original.
  • The output is smaller than expected. Cropping removes pixels; it never adds them. A quarter of a 12-megapixel photo is a 3-megapixel photo. If you need the result at a specific size, resize it afterwards.
  • A JPEG crop looks slightly softer. Cropping through a canvas re-encodes, so a lossy source is compressed a second time. It is minor at the quality used here, and unavoidable without a lossless JPEG cropper, which only works on multiples of 8 or 16 pixels.
  • Metadata is gone from the crop. Same reason: the output is re-encoded from pixels, so EXIF, including any GPS, does not survive. Usually what you want.

Frequently asked questions

Is the image uploaded?

No. The preview is an object URL pointing at the file on your device, and the crop runs in a Web Worker in this tab. Nothing is transmitted at any point.

What size should a profile picture be?

Square, and at least 400px. Most platforms display it small but store a larger copy for high-density screens, and an upload smaller than the display size gets enlarged. Crop to 1:1 here, then resize if the platform has a hard limit.

Can I crop several images at once?

Not here, and deliberately. A crop is a decision about one particular image; applying the same rectangle to a batch produces something useful only when every photo is framed identically. For batch work with one shared setting, the resizer takes many files at once.

Does cropping reduce the image quality?

The kept pixels are unchanged in size, so nothing is resampled. A JPEG is re-encoded on the way out, which costs a little at the quality used here, and any EXIF including GPS is dropped with it. A PNG crop is lossless.