Crop an Image in the Browser: The Four Numbers Behind the Drag

A crop is four numbers, not a drag gesture

Cropping an image looks like a mouse action. Underneath it is a rectangle: an x, a y, a width and a height, in pixels. Most croppers keep those numbers to themselves and give you a drag handle instead, which makes the result hard to reproduce and harder to check.

The Image Studio's Crop tab in OnePassApps does the opposite. It shows the rectangle as four number fields, and it hands you the cropped file so you can verify it.

Full disclosure: I work on OnePassApps. This is the Crop tab in the Image Studio, checked in the live tab while writing this - every number below came out of a run I made, not out of the marketing copy.

Open it here: the Image Studio

The panel

The Image Studio carries seven tool tabs on one page: Convert, Compress, Resize, Crop, Remove background, Remove metadata, Images to PDF. The page line above them reads "Convert, compress, resize, crop and clean images in your browser. Nothing leaves this tab."

The Crop tab is laid out as three numbered steps.

01 Source - "No image yet. Drop one on the stage or browse for it."

02 Crop area - "Drag on the image to draw a crop, or type its position and size. The fields appear once an image is open." An Aspect ratio dropdown, four number fields (X (px), Y (px), Width (px), Height (px)), a row of nudge buttons under the label "Move 1 px", and a Format choice of PNG, JPEG or WebP.

03 Result - "The new copy's size and format appear here."

The action button is Crop image, and once a run has finished it becomes "Crop again". The file picker accepts JPEG, PNG or WebP, up to 25 MiB and 25 megapixels, and the page repeats "Processing stays in this browser."

The Aspect ratio dropdown is not just a free-form field: opened, it offers Free crop, 1:1, 4:3, 3:2, 16:9, 9:16.

The fields are clamped, and that is the first thing you will hit

The four number fields are not free. Each carries a live maximum derived from the image and the rest of the rectangle: on a 400 x 300 image with a 100 x 100 crop, X tops out at 300 and Y at 200, because 300 + 100 is the image width and 200 + 100 is its height.

So the order matters. My first attempt to type X = 200 while the width was still 400 was rejected and the field stayed on 0 - at that moment the maximum legal X was 0, because a 400-wide crop can only start at 0. Setting the width to 100 first moved the X maximum to 300, and the same 200 then took. Set the size before the position, and the fields stop arguing with you.

Proving the output instead of trusting the panel

Here is the run, in full, on a 400 x 300 PNG I generated myself (four flat colour quadrants with a black marker square in the top-left corner).

Run 1 - top-left corner. X 0, Y 0, width 100, height 100, format PNG. The panel reported:

• "Before 1.8KiB PNG"
• "After 597B PNG"
• "Dimensions 400 × 300 → 100 × 100"
• "PNG · 100 × 100 · 597 B · 67% smaller"

The exported file was a real PNG - the IHDR header in the downloaded bytes read width 100, height 100. Then I read the pixels of the result itself: the top-left pixel was black (0,0,0,255), the middle pixel was red (255,0,0,255) and the bottom-right pixel was red too (255,0,0,255). That is exactly the region of the source the rectangle describes: the black marker square in the corner, then the red quadrant.

Run 2 - off origin. X 200, Y 0, width 100, height 100, format PNG. The panel reported "After 589B PNG", "Dimensions 400 × 300 → 100 × 100" and "PNG · 100 × 100 · 589 B · 67% smaller", and the downloaded file's IHDR header read 100 x 100 again.

The pixel check is what proves the crop actually moved. All three sampled points of that output read (0,255,0,255) - green - because the source rectangle at x = 200, y = 0 is the green quadrant, not the red one. If the tool had quietly cropped from the origin, the output would still have measured 100 x 100 and the panel would still have said "67% smaller". Only the pixels say whether the crop was the one you asked for.

The default output format is JPEG, and that can surprise you

The Format radio defaults to JPEG, so the very first crop I made came out as "probe-crop.jpg" - "After 2.8KiB JPEG", "Dimensions 400 × 300 → 400 × 300", "JPEG · 400 × 300 · 2.8 KiB · 60% larger".

Two things are worth reading there. The crop of the full frame was the full frame (400 × 300 in, 400 × 300 out) - it re-encoded rather than cut. And the file grew by 60%, because a flat-colour PNG is already a better encoding of flat colour than JPEG is. Neither is a failure; it is the reason the panel always shows the before and after sizes and lets you keep whichever copy you want.

Pick PNG in the Format row when you want a lossless result, and the same crop came out at 597 B for the corner and 589 B for the off-origin rectangle, against 1.8 KiB for the source.

What you get at the end

The result panel gives you the file name, the format, the pixel dimensions, the size change, the time it took ("Cropped in 0.2 s"), and a Download button. It also offers a Result / Original toggle so you can compare the two side by side, and a "Fit" / "100%" view control for checking the cut at actual size. The panel's closing line is the honest one: "Finished. Download a new copy; the original stays unchanged." Your source file is never overwritten.

Why do it in the tab at all

The usual reason to crop something is that it goes somewhere you do not control - a form with a 2 MB avatar limit, an upload box that wants a specific aspect ratio, a screenshot you are about to paste into a ticket. Those are exactly the files you would rather not hand to a stranger's server, and this tab never sends them: the page says "Nothing leaves this tab." and "Processing stays in this browser.", and the only thing that leaves the browser is the file you download yourself.

Full disclosure again: I work on OnePassApps. The Image Studio is free right now during the promotional period - Standard is $0/month with 100,000 credits every 30 days, no end date set and no card required, and existing paid subscriptions keep their terms. If you want the other tabs in the same place, the guides are here: OnePassApps app guides