How to crop, rotate and resize an image in one pass without losing sharpness

A typical job has three verbs in it. A 4032 × 3024 photo taken looking down at a desk has come out sideways, and it needs a square crop, a quarter turn and a final size of 1080 pixels. Done on three single-purpose websites, that is three uploads, three downloads and three fresh encodes of the same picture. Done in one place, it is one decode and one encode, and the sharpness that survives depends mostly on how the last step shrinks the pixels.

The worked example, step by step

Step	Size afterwards	Megapixels	What matters here
Original photo	4032 × 3024	12.19	Any orientation flag the phone wrote is honoured on the way in; this one is genuinely sideways
Centred 1:1 crop (Left 504, Top 0, Width 3024, Height 3024)	3024 × 3024	9.14	(4032 − 3024) ÷ 2 = 504 pixels trimmed from each side
Quarter turn with ↻ 90°	3024 × 3024	9.14	A square keeps its size; the crop numbers keep meaning the same edges
Width set to 1080	1080 × 1080	1.17	1080 ÷ 3024 = 35.7% of the width, a reduction of 64%
Download	One file		One encode, named after the format the browser actually wrote

The last row before the download is where sharpness is won or lost. A 64% reduction is well past the point, about a third, where a browser’s built-in scaler starts visibly throwing detail away.

Why big reductions go soft

Resampling is computing new pixels from the ones around them when an image changes size. Every resize does it; the question is how carefully.

The browser’s own route is to draw the image onto a smaller canvas. That samples cheaply, and on a reduction of more than about a third it skips detail that sat between the samples: fine rules turn dotty, small text turns to mush, hair and foliage go soft. You cannot choose the method either. Chrome and Firefox use something Lanczos-like, Safari uses bicubic, and nothing in the canvas interface lets a page ask for anything else.

The image editor resizes with Lanczos3 instead, which works out each output pixel from a weighted window of source pixels rather than a single cheap sample. That is why edges and lettering survive a 64% reduction. The resampler costs 14 KB gzipped, loads only on this page and runs in a worker, so dragging a crop handle stays smooth while it works. It runs only when the size actually changes; at 1:1 there is nothing to resample.

Enlarging goes through the same resampler and comes out clean, but it invents nothing. Detail the camera never captured is not in the file, which is the subject of the image enlarger.

Why one pass beats three

Each separate tool decodes your file, does its one job and encodes a new file. If the format is JPEG, or WebP below full quality, each of those encodes discards detail again, on top of what the previous one discarded, and you cannot get it back. Three tools means three encodes; one pass means one.

The tool’s own comparison with single-purpose pages:

	The image editor	Separate crop, rotate, flip and resize pages
Round trips	One decode, one encode	Re-encodes between every step
Transform order	Stated: crop, flip, rotate, resize	Undocumented
Crop coordinates	Stored in the original image’s pixels	Recomputed after each rotation
Downscaling	Lanczos3 in a worker	Whatever the browser does
Keyboard	Number boxes and a focusable selection	Pointer only

“Smallest”, the default export choice, tries WebP, JPEG and PNG and keeps whichever came out smallest. Those are three encodes of the same finished pixels, not one encode fed into the next, so the file you keep is still a single generation away from your original.

The order is fixed, and it is written down

Image transform order is the sequence in which crop, flip, rotate and resize are applied. It matters because transforms do not commute: flipping and then rotating gives a different picture from rotating and then flipping.

Here it is always crop, then flip, then rotate, then resize. The crop boxes are stored in the original photo’s own pixel coordinates, so a Left of 504 typed before you press ↻ 90° still means the same edge afterwards. Resize runs last because there is no point resampling pixels a crop is about to throw away.

One consequence looks like a bug and is not. Because flip runs before rotate, a stored horizontal flip shows up as a vertical one once the image is at 90°. The flip buttons compensate, so “Flip ↔” always flips the way it looks like it should, and the readout beside them shows the turn and the flips as you see them.

Doing it in the image editor

1. Open the image editor and press “Choose an image”, or drop one on the box. HEIC straight from an iPhone often needs converting first.
2. Set the crop under “Crop · drag or type”. Drag a rectangle on the photo, pick a ratio from “Free”, “1:1”, “4:3”, “16:9” and “3:2”, or type exact values into “Left”, “Top”, “Width” and “Height”. Tab to the selection and the arrow keys nudge it one pixel at a time, twenty with Shift held. “Reset” returns to the full frame.
3. Turn and flip under “Turn”: “↺ 90°”, “↻ 90°”, “180°”, “Flip ↔” and “Flip ↕”.
4. Resize in the next panel. Type a “Width”, “Height” or “Percent”; “Ratio locked” keeps the proportions, and “Match crop” puts the size back to the cropped dimensions. The “Output” and “Megapixels” readouts beside the live preview update as you type.
5. Choose a format under “Save as”: “Smallest”, “PNG”, “JPEG”, or “WebP” if your browser can encode it. The “Quality” slider runs from 0.30 to 1.00, starts at 0.85, and is switched off for PNG, which is lossless.
6. Press “Download”. The file is named after what the browser really produced, and “Last file” shows its size.

What the export changes besides the pixels

• Metadata goes. Re-encoding drops EXIF, which removes the GPS coordinates a phone writes into every photo, and also the copyright and camera fields if you needed them.
• JPEG has no transparency. Anything see-through is flattened onto white.
• There is a size ceiling. A browser canvas holds roughly 8,192 pixels a side, and older iOS caps the total near 16 megapixels. Past either limit a canvas returns a blank image without an error, so the tool caps the size and says so. The check covers the intermediate canvas too: a 12,000-pixel scan cropped to 11,000 pixels is still over the ceiling.
• No free-angle rotation. Only quarter and half turns. Straightening a horizon by two degrees would interpolate, and soften, every pixel.

Other ways to do it

On a Mac, Preview can do two of the three: Tools → Crop crops to a selection, and Tools → Adjust Size resizes. On Windows, the Photos app crops and rotates images. Whichever app you use, make every change before you save, so the picture is encoded once.

Checking that nothing was uploaded

Open your browser’s developer tools on the Network tab before you start. The first resize fetches the resampler itself, a script served by this site; nothing carrying your image goes out, because the crop, the turn and the resample all happen in the tab.

Do all three jobs at once in the image editor. To find out how large the finished pixels will print, use the pixel converter; to make the saved file smaller without touching a pixel, the image compressor.