Image Cropper

What this tool is used for

• Cropping to an exact pixel size required by an upload or a design spec.
• Removing a watermark strip or a browser chrome band from a screenshot.
• Producing a square version of a photo for an avatar without opening an editor.
• Trimming whitespace from an exported diagram.
• Cutting a region out of a large screenshot to attach to a ticket.

Frequently Asked Questions

Does cropping reduce quality?

Cropping itself removes pixels without touching the rest — but re-encoding to JPEG applies lossy compression again, so a cropped JPEG loses a little quality everywhere, not just at the edges. Cropping to PNG avoids that.

What is the difference between cropping and resizing?

Cropping DISCARDS pixels outside a region and changes the composition; resizing keeps the whole image and resamples it to new dimensions. Cropping never invents pixels; upscaling always does.

How do aspect-ratio presets work?

They constrain the selection so width and height keep a fixed proportion — 16:9 for video, 1:1 for avatars, 4:5 for Instagram portrait. The output pixel dimensions still vary; only the ratio is fixed.

Why does my crop look rotated?

Because of the EXIF orientation tag. If the tool reads pixels without applying it, the crop region is computed against the unrotated image and lands in the wrong place — a classic bug with phone photos.

How small can I crop before it matters?

For screen use, aim for at least the display size times the device pixel ratio — typically 2x. Cropping below that then displaying larger forces upscaling, which is where softness appears.

What is the difference between cropping and using object-fit?

Cropping removes pixels permanently; `object-fit: cover` displays part of the full image and keeps the rest. The CSS approach still downloads every byte, which is why a cropped file is the better answer for a fixed layout.

Where should the crop be anchored?

On the subject, which is rarely the centre. Automatic centre-cropping is what removes heads from portraits in thumbnail grids — a focal point stored with the image is how production systems avoid it.

Common errors and gotchas

• Cropping a lossy image and re-saving it, which adds a second generation of compression artefacts.
• Working in CSS pixels while the file is at a higher device pixel ratio, so the crop lands in the wrong place.
• Losing the only copy by overwriting the original.
• Assuming the aspect ratio is preserved. An arbitrary pixel crop changes it unless you constrain it.
• Cropping before resizing when the target size is fixed, which discards detail you then have to upscale.