Image Cropper

What is an image cropper?#

Cropping sounds like the simplest image operation — keep a rectangle, throw the rest away. The moment you need it done right, though, a whole set of questions piles in: does the crop keep a fixed aspect ratio for a thumbnail or banner slot, can I fix a tilted horizon first, will the export be small enough to upload, and does any of this leave my device? This page is a full crop studio that answers all four in the browser.

You drag an image in, draw a selection box over it (or grab one of its eight handles to resize), optionally rotate or flip the whole frame, lock the selection to a ratio like 1:1 or 16:9, and export the cropped region as PNG, JPEG, or WebP at a quality you choose. Everything runs on the Canvas API inside this tab — the original file is read locally and the result is re-encoded locally, so nothing is uploaded.

How to use it#

1. Drag a picture onto the dashed drop area (or click it to pick a file). The editor appears, replacing the drop zone.
2. Use the toolbar above the preview to transform the whole frame before cropping:
   • Rotate turns the image 90° clockwise each click. The crop selection is tracked in the rotated coordinate space, so it always lines up with what you see.
   • Flip H / Flip V mirror the frame horizontally or vertically.
3. Pick an Aspect ratio from the dropdown: Free (drag any rectangle), 1:1 (avatar / profile), 4:3, or 16:9 (wallpaper / video cover). With a ratio locked, the box keeps that shape as you drag — corner handles grow to contain your cursor, edge handles derive the perpendicular side automatically.
4. Drag the body of the box to move it; drag any of its eight handles to resize. Mouse and touch both work.
5. Set the export options below the preview:
   • Format — JPEG (smallest, lossy), WebP (small, modern), or PNG (lossless; the quality slider is disabled because PNG has no quality knob).
   • Max dim — a number in pixels; the longer side of the crop is capped at this value while preserving the ratio. Leave it 0 to keep the full crop resolution.
   • Quality — 5–100, used by JPEG and WebP only. 92 is a sane default; drop to 80 for thumbnails.
6. Watch the readout next to Download: it shows the selection size and the resulting output size, e.g. 1500×1500 → 800×800 when a 1:1 selection is capped to 800.
7. Click Download to save. Use Reset to clear the selection back to its centered default.

Key features#

• Ratio-locked resizing that actually feels right. Corner handles grow to reach your cursor on both axes; edge handles adjust only the dragged axis and recompute the other from the ratio. No accidental stretching.
• Transform-aware selection. Rotation and flip are applied once to an offscreen canvas, and the crop box lives in that transformed space, so what you select is exactly what you export — no mismatch between preview and output.
• Three formats with honest quality. PNG is flagged lossless and disables the slider instead of silently ignoring it. JPEG and WebP expose a real quality value fed straight to the encoder.
• Optional output cap. Set a max dimension and the crop is scaled down preserving the ratio — handy for avatars, Open Graph images, or upload limits — without you doing the math.
• Live before/after readout. The selection dimensions and the final output dimensions sit side by side, so a cap or a ratio change is visible before you commit.
• 100% local. The image is decoded by the browser and re-encoded by the browser. There is no upload endpoint.

Worked example#

You have a 4000×3000 landscape photo and need a 16:9 banner thumbnail whose longer side is 1280px. Load the photo, set Aspect ratio to 16:9, and drag the selection over the horizon. Because the ratio is locked, the box snaps to a 16:9 rectangle; suppose the selection settles at 4000×2250 in source pixels. Now type 1280 into Max dim. The readout updates to:

crop size  4000 × 2250  →  1280 × 720

Pick Format: JPEG, leave Quality at 92, and Download. You get a 1280×720 JPEG roughly 180–280 KiB depending on the scene — a fraction of the original multi-megabyte file, with the exact aspect ratio a hero banner needs and no letterboxing. The same flow with 1:1 and Max dim 512 produces a ready-to-upload profile picture.

FAQ#

The selection won’t go smaller than a certain size — why?#

There is an 8-pixel minimum edge, enforced so the handles stay grabbable and the export is never a degenerate sliver. If you need an extremely tight crop, do not zoom in and crop a tiny region — crop a larger area, then scale it down with Max dim.

I locked 16:9 but the box changed size when I dragged near the edge.#

That is the bounds clamp keeping the box fully inside the image. When a ratio-locked box would run past an edge, the shorter side is reduced so the ratio survives inside the available space. Move the box toward the center first, then resize.

Should I export JPEG or WebP?#

WebP at the same quality is typically 25–35% smaller than JPEG and is now supported everywhere that matters. Use JPEG only when some legacy pipeline downstream rejects WebP. Use PNG when the crop is a logo, a UI screenshot, or anything with sharp edges and flat color where lossy artifacts would be visible.

Does cropping reduce file size?#

It can, in two ways: less area means fewer pixels to encode, and Max dim can downscale on top of that. But a 200×200 crop of a noisy photo at quality 100 can still be larger than the full image at quality 80 — the Quality slider is the real lever for lossy size.