Before compressing anything, answer one question: how wide will this image actually be displayed? Most oversized files on the web are not badly compressed - they are simply far larger than their container.
Start from the layout, not the camera
A camera produces 4000-pixel-wide photographs because it might need them for print. A web page shows that photograph at 800 pixels because that is how wide the column is. Delivering the 4000-pixel version means the browser downloads five times the pixels it will ever display, then throws most of them away when it draws them.
Measure the container instead of guessing: narrow the browser window to its narrowest realistic width and see how wide the image area becomes. The widest it ever gets is the width you need.
Rough starting points
| Where the image appears | Width to supply |
|---|---|
| Full-width hero banner | 1600-1920 px |
| Article body image | 800-1000 px |
| Card or thumbnail in a grid | 400-600 px |
| Small avatar or icon | 64-128 px |
These are starting points, not rules. The container width always wins over any table, and a high-density screen needs up to twice the CSS width to look sharp - which is why the numbers above are generous rather than minimal.
Why the pixel count matters more than quality
File size scales roughly with the number of pixels. Halving the width and the height leaves a quarter of the pixels and, with it, close to a quarter of the file size. The quality setting, by contrast, has sharply diminishing returns: there is only so much detail to discard before the image looks wrong.
So resizing to the real display size first, then compressing lightly, beats compressing hard at full size on both counts - smaller file, better appearance.
One image, several widths
If a site serves the same image at very different sizes, the correct approach is responsive images: a small version for phones and a larger one for wide screens, chosen by the browser. That is a markup change, not something a compressor can do for you, and it is worth doing only for images that appear large and often.
Then compress
Once the dimensions are right, the quality setting only has the last few per cent left to handle. The compressor lets you set a maximum width and height, so resizing and compressing happen in one step. Compressing images before uploading covers the workflow.