The order is the whole trick
Every image optimization article says the same three words - crop, resize, compress - but few say what order protects your quality and your megabytes. The answer is strict: crop, then resize, then compress. Each step builds on the previous one, and doing them out of order either wastes effort or makes the final file bigger than it needs to be.
Why crop comes first
Cropping removes pixels. If you crop after resizing you pay for the wider, taller image right up to the last moment - then discard those pixels anyway. Cropping first means the resize step works with the smallest honest canvas, and both the intermediate render and final encode carry less data. It also lets you frame the composition while you still have full resolution to judge it.
Why resize follows crop
Resizing to the largest display slot the image will occupy locks in your efficiency. A 3000px photo destined for a 760px blog column should be resized to 760px wide (or typically 2x for retina, 1520px). Exporting at the source resolution and relying on the browser to shrink it wastes bandwidth on every page view; resizing in the tool means every served byte is a byte that displays.
Why compression always comes last
Compression removes fine detail the eye does not miss, but it cannot recover pixels that never existed. Compress the already-cropped, already-resized version, because compression is where the biggest byte reduction lands and quality loss is most visible when pixels are plentiful. Compressing early and resizing after would upscale artifacts along with the image.
The workflow in practice
- Open the original and crop to the final composition.
- Resize to the display width (see your 2x-retina decision).
- Compress at a sensible quality, checking the preview at real display size.
- Export once, keep the original untouched, and repeat for the next image.
Batch it or automate it
Doing this by hand for one hero image is seconds of work; doing it for a gallery is a pipeline. For anything repeatable, run resize-and-compress automatically at upload time and keep the crop manual - composition still needs human eyes.