DEV Community

Cover image for ✂️ Image Crop: Pixel-exact crops with locked ratios and numeric entry
Tomaz
Tomaz

Posted on Originally published at tooladda.online

✂️ Image Crop: Pixel-exact crops with locked ratios and numeric entry

⚡ 10-second version

Drag a crop box, or type the exact pixel values at tooladda.online/image-crop.html. Ratio locking means a square stays square, and social presets mean you stop looking up dimensions.

❗ Important

Cropping runs in your browser. Photos with faces, documents, screenshots of private dashboards — none of it is uploaded.


📐 Crop, then resize — never the other way round

The order matters more than most people expect, because cropping changes the aspect ratio and resizing doesn't.

✅ Crop to 1:1  →  then resize to 400×400        sharp, correctly framed
❌ Resize to 400×400  →  then crop               squashed, then you lose more pixels
Enter fullscreen mode Exit fullscreen mode

If you resize a 4:3 photo to a 1:1 target first, you either squash the image or the tool crops arbitrarily on your behalf — usually straight through someone's face. Crop to the ratio you need first, deciding what stays in frame, then resize to the pixel size you need.

The ratios that actually get used

Ratio Where
1:1 Profile pictures everywhere, Instagram square posts
4:5 Instagram portrait — the tallest feed post allowed, so it takes the most screen
9:16 Stories, Reels, Shorts
16:9 YouTube thumbnails, presentation slides, video frames
1.91:1 Link previews (Open Graph cards)
3:2 / 4:3 What your camera and phone actually shoot

💡 Tip

Crop for the subject, not just the shape. Leave a little headroom above a face, keep eyes roughly a third from the top, and don't crop a limb exactly at a joint. A technically correct 1:1 crop through someone's chin is still a bad photo.

Does cropping lose quality?

Cropping itself throws away only the pixels outside the box — the ones you kept are unchanged. But saving as JPEG re-encodes the whole thing, which costs a little quality every time. So crop once from the original rather than cropping a crop of a crop. For lossless output where the format allows it, PNG or WebP-lossless avoids the re-encode penalty entirely.


🧭 How it works

Diagram


✨ What's inside

### 🔢 Numeric entry Type exact x, y, width and height. Essential when a spec says "crop to 600×600 starting at 120,40" and dragging by hand won't hit it. ### 🔒 Aspect ratio locking Pick a ratio and the box can't drift off it while you drag. Squares stay square.
### 📱 Platform presets Profile, post, story, thumbnail and cover ratios ready to select rather than remembered wrongly. ### 🎯 Zoom for precision Zoom in to place edges on the pixel you mean — the difference between a clean crop and a one-pixel border of the old background.

🛠️ Real jobs

Situation Ratio
👤 Profile picture 1:1, face centred with headroom
📸 Instagram feed post 4:5 for maximum screen presence
🎬 YouTube thumbnail 16:9
📱 Story / Reel 9:16
🖼️ Removing a watermark or clutter at the edge Free crop
📄 Trimming a document photo to the page edges Free crop, then straighten

📖 Four steps

1.  Open   →  tooladda.online/image-crop.html
2.  Drop   →  your image (use the ORIGINAL, not a crop)
3.  Crop   →  pick a ratio or type exact pixels; zoom for edges
4.  Export →  download, then resize separately if you need a pixel size
Enter fullscreen mode Exit fullscreen mode

▶ Crop now — tooladda.online/image-crop.html


❓ FAQ

Is it free? Watermark?

Free, no watermark, no signup, no limit.

Are my images uploaded?

No — cropping happens in your browser.

Does cropping reduce quality?

The kept pixels are unchanged. Saving as JPEG re-encodes them, which costs a little each time — so crop once from the original.

Crop first or resize first?

Crop first, always. Cropping sets the shape; resizing sets the size. Doing it the other way squashes the image or crops arbitrarily.

Can I crop to an exact pixel box?

Yes — type x, y, width and height directly.

How do I get a specific final pixel size?

Crop to the ratio here, then use the Image Resizer for the exact dimensions.


🔬 Under the hood

  • Canvas-based cropping in vanilla JavaScript; no upload endpoint.
  • Ratio constraint applied during drag, with numeric fields kept in sync.
  • Output re-encoded only once, in the format you choose.
  • Works offline once loaded.

Originally published on ToolAdda, where Image Crop runs free in your browser — nothing is uploaded, nothing leaves your device.

Top comments (0)