Resize Then Compress Images for the Web

Compressing a 6000px photo “for the web” without resizing wastes quality and time. Fix the pixel box, then the bytes.

Workflow

1. Crop framing on /tool/image-crop if the subject needs it.

2. /tool/resize-image to the width you’ll actually display.

3. /tool/compress-image until it fits the CMS or email budget.

Client drafts

A light mark via /tool/watermark-image after sizing keeps placement consistent across a set. Deliver unmarked masters separately.

Where it lives

All of this is on the /image hub — browser-side for everyday edits.

Picking a width before you touch quality

Match the pixel width to the slot. A full-bleed hero might be 1600 or 2000 pixels wide. A card thumbnail is often under 800. An email signature image should be far smaller than either. Compressing first and resizing second keeps pixels you will throw away, and the quality slider then fights a file that was never the right shape. Crop when the subject is lost in empty background — a square avatar does not need the whole landscape. After resize, compress only until the file fits the budget you were given. Stop when type in the image or a face starts to block up. Save the full-size original outside the CMS. Social covers and blog images are delivery files; the camera original is what you would reprint or recrop later. Check the exported file size before you upload it. If it is still over the budget, lower the quality one step and look at the face or the logo again. Do not resize a second time on top of an already small export. That only softens edges. Start over from the master if the first export is too small or too soft.