Crop Image
Crop Image cuts a photo down to the part you want — drag a box over it, or type an exact width and height. The box is measured against the photo's real size rather than the preview on screen, so 600 by 240 means 600 by 240 no matter how big your window is, and the pixels you keep are untouched.
Drop an image here
or drop anywhere on this page · Choose a file · 100 MB
How does Crop Image work?
Cropping is the one image operation that costs nothing in quality. Every other edit re-samples or re-quantises pixels; a crop simply keeps a rectangle of them and throws the rest away. The pixels that survive are the pixels you started with, drawn at a one-to-one scale into a smaller canvas.
Why the rectangle is measured in source pixels
The preview on this page is whatever width the layout gives it — smaller on a phone, larger on a desktop, different again after a window resize. If the crop rectangle were stored in those screen pixels, the same drag would produce a different result depending on the browser window, and rounding would land on a different boundary each time.
So the rectangle is kept in the image's own coordinates and the preview is projected from it. Drag the same corner on a phone and on a monitor and you get the same crop, and the numeric boxes show the real pixel values rather than a scaled approximation.
Aspect ratios, and why they are worth locking
Most places an image ends up expect a particular shape, and they will crop it themselves if you do not: a square for an avatar, 1.91:1 for a link preview, 16:9 for video. Choosing the crop yourself is the difference between a portrait with the subject in the frame and one that a platform's centre-crop has beheaded. With a ratio locked, dragging any corner keeps the shape and only the size changes.
The rule-of-thirds guides
The lines across the crop box divide it into nine. Placing a subject on one of the intersections, rather than dead centre, is the oldest compositional advice there is — it works because a centred subject flattens the image and an off-centre one leaves the eye somewhere to travel. The guides cost nothing to draw and they are there because a crop is a compositional decision, not just a size one.
Where quality does get involved
The crop itself is lossless, but writing the result out is not — if the output is JPEG or WebP, the kept pixels are re-encoded, and that is a generation of lossy compression on top of whatever the source already had. The quality control here defaults high for that reason. Cropping a PNG to a PNG is lossless end to end.
What happens to a transparent image
Transparency survives a crop into PNG or WebP. Into JPEG it cannot — there is no alpha channel — so transparent areas are composited against white before encoding, which is what stops them coming out black.
Everything stays on your machine
The image is decoded with createImageBitmap, drawn into a canvas at the crop rectangle, and encoded with canvas.toBlob. All three are the browser's own code, running in this tab. The photo is never uploaded, and the page's Content-Security-Policy sets connect-src 'self', so the browser would refuse to send it anywhere even if something tried.
Input
portrait.jpg 3024 x 4032 ratio locked 1:1
Output
portrait-3024x3024.jpg 3024 x 3024 pixels kept, not resampled
What options and edge cases does Crop Image support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| Free | aspect ratio | default | Any rectangle. |
| 1:1 | aspect ratio | — | Avatars, product shots, most social posts. |
| 4:3 | aspect ratio | — | The classic camera and screen ratio. |
| 3:2 | aspect ratio | — | 35mm film, and most DSLR sensors. |
| 16:9 | aspect ratio | — | Video, and wide banners. |
| 1.91:1 | aspect ratio | — | Open Graph link previews. |
| X / Y / W / H | pixels | — | The crop rectangle in the image's own coordinates. Typed values and dragged ones are the same numbers. |
| Quality | 0.1 – 1.0 | 0.9 | Applies when the output is JPG or WebP. High by default, because the crop itself loses nothing and the encode should not either. |
| Same as source | format | default | PNG in, PNG out — which keeps the whole operation lossless. |
Frequently asked questions
Does cropping reduce image quality?
The crop itself does not — it keeps a rectangle of the original pixels untouched and discards the rest, with no re-sampling at all. What can cost quality is writing the result out: if the output format is JPEG or WebP, the kept pixels are re-encoded, which is one more generation of lossy compression. Crop a PNG to a PNG and the whole operation is lossless. The quality slider here defaults to 0.9 precisely so the encode does not undo what the crop preserved.
How do I crop to an exact size in pixels?
Type into the X, Y, Width and Height boxes — they are the crop rectangle in the image's own coordinates, and they are the same numbers the drag handles produce. Setting Width and Height gives you an exact output size; X and Y position the rectangle. If you need a specific shape rather than a specific size, lock an aspect ratio and drag instead.
What aspect ratio should I use?
1:1 for avatars and most social posts; 1.91:1 for Open Graph link previews, which is what appears when someone shares a URL; 16:9 for video thumbnails and wide banners; 4:3 or 3:2 for photographs, which is what cameras natively produce. Choosing the crop yourself matters because the destination will crop it for you otherwise, usually from the centre and usually badly.
Can I crop several images at once?
Not here, and that is deliberate. A crop rectangle is specific to what is in the frame — the same coordinates applied to twenty photos would cut the subject out of most of them. Batch operations that genuinely apply uniformly, like resizing or converting, do take multiple files; cropping is a per-image decision, so this tool takes one image and gives you the controls to make that decision properly.
Why does the crop box snap back when I drag past the edge?
Because the rectangle is clamped to the image: a crop cannot include area that does not exist. With an aspect ratio locked, hitting one edge also constrains the other dimension, since the shape has to be preserved — so the box stops growing rather than becoming the wrong shape. Switch to Free if you want the rectangle to follow the pointer without that constraint.
Is the image uploaded to crop it?
No. It is decoded, drawn into a canvas and encoded entirely in this tab using the browser's own image code. You can confirm it in the Network panel of DevTools: cropping produces no requests at all. The page is also served with connect-src 'self', which means the browser itself blocks any attempt to send data to another origin.