Image Cropper

Cropping is the one image edit almost everyone needs and almost nobody wants to open an editor for. The tool above lets you drag a selection over your image, lock it to a ratio if you need one, and download the cut — all in the browser, with the file never leaving your device.

How it works

Drop in a JPEG, PNG or WebP. Drag on the image to draw a crop rectangle, then drag the handles to adjust it. The selection is constrained to the image bounds, so you cannot accidentally crop into empty space.

Aspect presets — Free, 1:1, 4:3, 3:2, 16:9 and 9:16 — lock the ratio while you drag. Free lets you pull any shape.

The crop rectangle you draw on screen is scaled back to the image's natural pixel coordinates before the cut, so the output is at full source resolution rather than at whatever size the preview happened to be displayed at. A 4000-pixel-wide photo previewed at 800 pixels still crops at 4000-pixel fidelity.

Two encoding details, the same ones that apply to the other image tools here:

• EXIF orientation is applied before cropping, so a portrait phone photo is cropped in the orientation you are actually looking at rather than the raw sensor orientation. Getting this wrong is what produces a crop rotated 90° from what you selected.
• Transparency is matted white when the output is JPEG, because JPEG has no alpha channel and the alternative is black boxes where the transparency was.

Output format defaults to auto, which keeps the source format, and can be overridden to JPEG, PNG or WebP. PNG output is always lossless; the quality setting applies to the lossy formats.

Cropping well

Crop first, resize second. Cropping removes pixels and therefore removes detail you cannot get back. Doing it before a downscale means the downscale works from the largest possible source; doing it after means you have already thrown away resolution.

Know your target ratio before you start. Social and platform crops are unforgiving: 1:1 for most profile images, 16:9 for video thumbnails and Open Graph cards, 9:16 for vertical stories. Cropping to "about right" and letting the platform re-crop is how faces end up half out of frame.

Leave headroom for automatic cropping. A card image rendered at 16:9 on desktop is frequently centre-cropped to something squarer on mobile. Keep the important content away from the edges so both crops work.

Check the output dimensions, not just the shape. A 1:1 crop from a small source can easily come out below the minimum a platform accepts — Open Graph images want at least 1200×630, and upscaling afterwards will not restore what is not there.

One lossy round trip only. Cropping a JPEG decodes and re-encodes it, so quality drops slightly even in the untouched area. Crop from the original, not from a copy that has already been through the process.

Where it fits

Cropped images are usually destined for a page, and their dimensions have consequences beyond how they look. An image whose intrinsic size is not declared causes the layout to shift as it loads, which is both irritating and a measurable ranking signal; HTML5 essentials covers the width, height and aspect-ratio attributes that reserve the space in advance. How much those bytes cost your users, and how to measure it rather than guess, is covered in application performance.

Related tools

To change the pixel dimensions of a whole image, use the image resizer; to shrink the file without changing dimensions, the image compressor; to change format, the image converter. To check how a cropped card will look when shared, the Open Graph preview.