Cropping is different from resizing. A resize keeps the whole picture and changes how many pixels represent it, while a crop removes everything outside the rectangle and keeps the remaining part at its original scale. Use a crop when the subject needs to be reframed, straightened up or isolated from a busy background, and use a resize when the framing is already right and only the file needs to shrink.
The image never leaves your device. It is decoded by the browser, the crop rectangle is tracked with pointer events on a canvas, and the selected region is redrawn onto a fresh canvas and re encoded locally, so a private photo stays private throughout.
When you should use an image cropper
A crop is the right tool whenever the composition of a photo needs to change rather than just its size. A portrait photo that has too much empty space above the subject's head, a screenshot that includes a browser toolbar you do not want, or a group photo where you only need one person's face are all jobs for cropping rather than resizing, and searching for a way to crop image online usually leads people here for exactly that reason.
It is also the standard first step before uploading to any platform with a fixed aspect ratio requirement. Social profile pictures, story frames and video thumbnails are all displayed inside a strict shape, and letting the platform crop automatically often cuts off exactly the part of the image you cared about.
- Crop to square for a profile picture, an app icon or a product thumbnail.
- Crop to a 9:16 portrait frame for a story or a vertical video cover.
- Crop to a 16:9 landscape frame for a video thumbnail or a presentation slide.
- Crop to 4:5 for a portrait oriented social feed post.
- Use a free form crop when there is no fixed shape requirement and you just want to trim the frame.
Using the aspect ratio presets
The preset buttons lock the crop rectangle to a fixed ratio of width to height while you drag it, so the shape never distorts by accident. Square, 1:1, suits avatars and thumbnails. Portrait, 4:5, matches how most social feeds display an image without cropping it further themselves. Landscape, 16:9, matches video and presentation frames. Story, 9:16, matches a full screen vertical video or story post.
Switching a preset recentres the rectangle at the largest size that fits inside the image at that ratio, and you can then drag the whole rectangle to reposition it or drag a corner handle to resize it while the ratio stays locked. Choose Free form to release the lock entirely and shape the rectangle however you like.
Dragging the crop rectangle precisely
The rectangle responds to pointer events directly on the canvas, so it works the same way with a mouse, a trackpad or a touch screen. Drag inside the rectangle to move the whole selection without changing its size. Drag one of the four corner handles to resize it, and with a locked aspect ratio the opposite corner stays anchored so the shape holds, which is what makes this an aspect ratio cropper rather than a plain free form crop tool.
Behind the scenes the tool tracks the rectangle in the coordinate space of the image's natural pixel dimensions, not the size it happens to be displayed on your screen. That scaling correction is what keeps the exported crop pixel accurate even when the preview has been shrunk to fit a phone screen, and it is the detail that a naive implementation usually gets wrong.
How this image cropper works under the hood
The source image is decoded once and drawn onto a display canvas sized to fit the available space. Pointer down, move and up events on that canvas update the rectangle's coordinates, which are stored in natural image pixels by dividing the pointer position by the current display scale factor.
When you press crop, a second canvas is created at exactly the rectangle's pixel width and height, and a single drawImage call copies just that region from the source image using its source offset and size arguments. The result is re encoded with canvas toBlob, all without any network request, which is why an image cropper built this way has no upload limit and no processing queue.
Choosing an output format after cropping
By default the crop keeps your source format, so a PNG with transparency stays transparent right up to the crop edge. You can also choose to export as JPG with an adjustable quality slider, which is useful when the crop is a photograph and you also want a smaller file in the same step.
If the source has transparency and you switch to JPG, the transparent areas are filled with white before encoding, since JPEG has no alpha channel. Keep the output as PNG whenever the transparency itself is part of what you are cropping.
How to crop an image
- 1
Add your photo
Drag an image onto the drop area, or click it to choose a file. It is decoded locally and never uploaded.
- 2
Pick an aspect ratio
Choose square, portrait, landscape or story, or select free form to crop to any shape.
- 3
Adjust the crop rectangle
Drag inside the rectangle to move it, or drag a corner handle to resize it, until the frame matches what you want to keep.
- 4
Crop and download
Press crop, review the preview, then download the cropped image.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.drawImageThe canvas method used to copy only the selected rectangle from the source image into the cropped output.developer.mozilla.org
- W3C: Pointer Events specificationThe unified input standard this cropper relies on so dragging the rectangle works identically with a mouse or a touch screen.w3.org
Frequently asked questions
Common questions about the image cropper.
No. Cropping only removes pixels outside the rectangle you draw, it does not resample or compress the pixels you keep. The remaining region stays at its original resolution and quality, so a crop of a sharp photo stays exactly as sharp inside the cropped area.
No. This image cropper runs entirely in your browser. The rectangle is tracked with pointer events on a canvas and the crop is produced locally, so your photo is never transmitted, which you can confirm by checking your browser's network panel while you crop.
Cropping removes part of the picture and keeps the rest at its original scale, changing the composition. Resizing keeps every part of the picture but changes how many pixels represent it, changing only the file size and display dimensions. Use cropping to reframe and resizing to shrink.
Yes. Choose the square, 1:1, preset and drag the rectangle to the region you want. The width and height are locked together as you resize it, so the exported crop is a perfect square in pixels regardless of the original photo's proportions.
The tool converts your on screen drag into the image's real pixel coordinates automatically, so this should not normally happen. If it does, try refreshing and cropping again, since it usually indicates the image finished loading after the rectangle was first drawn rather than a scaling bug in the export itself.
Yes. The crop rectangle responds to touch events the same way it responds to a mouse, so you can drag the rectangle and its corner handles directly with a finger on a phone or tablet screen, and the aspect ratio presets work identically on mobile.