Skip to main content

← Back to blog

How to Crop an Image (Without Losing Quality)

Cropping is the simplest photo edit there is: you keep a rectangle of the image and throw the rest away. It’s how you straighten a crooked shot, cut a distracting background, or turn a wide photo into a square avatar. Here’s what’s really happening — and how to do it without softening your image.

Screen pixels are not source pixels. We loaded our 1200 × 800 test photo into the crop tool. The page displays it at 620 × 413 to fit the layout, but the crop box reports 720 × 480 px — the frame is converted back to the original pixel grid before cropping. If a cropper reported screen pixels instead, you would silently get a much smaller image than you asked for. Output defaults to image/png, so a photo crop stays lossless but heavy; switch to JPG for photographs.

Cropping is not resizing or compressing

These three get mixed up constantly, but they change different things:

  • Crop — keep part of the frame, discard the edges. Composition and dimensions change; the kept pixels are untouched.
  • Resize — keep the whole frame, scale every pixel down (or up). Same picture, fewer pixels.
  • Compress — keep the dimensions, reduce the file size by lowering quality.

If your goal is “just show the important part”, you want to crop. If it’s “same image, smaller file”, you want resize or compress.

The distinction shows up in the numbers our own tool reports. Loading the 1200 × 800 test photo into the crop tool, the page displays it at 620 × 413 to fit the layout while the crop box reads 720 × 480 px — the frame is converted back to the original pixel grid before cropping. A cropper that reported screen pixels would silently hand you a much smaller image than you asked for.

Cropping doesn’t reduce quality — but the format can

A crop simply copies the selected pixels into a new, smaller image. The pixels you keep are bit-for-bit identical to the original. What can cost quality is the format you save to: a good cropper crops from the original resolution, not the shrunk preview on your screen, so even a small selection exports sharp. If you then export as JPG, that adds compression; export as PNG to keep it lossless. A browser crop tool lets you pick either.

Format is the part that does cost quality, and the default matters: our tool outputs image/png. That keeps a crop lossless, but a cropped photograph stays heavy — switch the output to JPG when the subject is photographic and you only need it to look right, not to be exact.

How to get a clean crop

  1. Upload the image and a selection box appears over it.
  2. Drag the box to frame what you want; pull the corners to resize the selection.
  3. Watch the pixel dimensions readout so you know the output size.
  4. Choose PNG (lossless / transparency) or JPG (smaller photos), then download.

Why do it in the browser?

A client-side cropper never uploads your file — it reads the image with a <canvas>, crops locally, and hands you the result. That’s faster, private, and works offline.

Common aspect ratios and where they fit

Cropping to a set ratio keeps your image from being awkwardly letterboxed later. The most useful ones:

RatioShapeTypical use
1:1SquareAvatars, profile photos, product tiles
16:9WideVideo thumbnails, slides, banners
4:5TallInstagram portrait posts
9:16Very tallPhone wallpapers, stories, reels
3:2Classic photoPrints and most camera output

Locking the ratio while you drag guarantees the crop fits its destination without a second resize.

Free crop vs fixed ratio

  • Free crop lets the selection be any shape — best when you just want to cut clutter or straighten a shot.
  • Fixed ratio constrains the box — best when the output must match a slot, like a 1:1 avatar or a 16:9 header.

The crop box you drag is not the crop you get — it is scaled back to the source pixels, which is why the numbers matter. We loaded the 620 × 413 photo from our test corpus into the crop tool and read the default box: 720 × 480 px, output format image/png. That is the value to watch, because a box that looks generous on a scaled-down preview can still be below the resolution your target needs — and no crop can add pixels back.

Keeping a crop truly lossless

Cropping copies pixels, but re-saving can undo that. Exporting a JPG re-encodes the whole image and adds a little compression each time. If the source is a JPG and you want a pixel-perfect result, crop and export as PNG. If the file is bound for the web and a small quality trade is fine, JPG keeps it lighter.

Common misconceptions

  • “Cropping zooms in and blurs the image.” It doesn’t add pixels — it removes the ones outside the box. Blur only appears if you later enlarge the small crop.
  • “A tighter crop always means a smaller file.” Usually smaller, since there are fewer pixels, but the format and quality setting decide the final size.

FAQ

Does cropping change the resolution (DPI)?

It changes the pixel dimensions, not the DPI tag. A crop has fewer pixels, so at the same DPI it simply prints smaller.

I cropped too tight — can I get the edges back?

No. The discarded pixels are gone. Keep the original and crop a copy if you might need the full frame later.

How do I make the crop an exact pixel size?

Crop to frame the subject, then set precise dimensions — see how to resize an image without losing quality.