An image is only big relative to the box it lands in

I keep coming back to this because it is the single measurement that finds most image waste, and almost nobody takes it.

A 225KB JPEG is not “a big file”. It is a perfectly reasonable file if it fills a wide hero. It is enormous if it renders into a 239×148 card, which is exactly what mine were doing across twenty-five certificate thumbnails.

The measurement

For every image, compare two numbers:

• Intrinsic size — the pixel dimensions of the file itself.
• Displayed size — the CSS box it actually renders into, multiplied by the device pixel ratio you want to support.

Anything beyond roughly 2× the displayed size is bytes the visitor downloads and cannot see. On my own site that ratio was about 7×.

The constraint people miss

Before shrinking anything, check what links to it. My certificate thumbnails were each wrapped in a link pointing at their own full-size file, because clicking a certificate should show the real, readable document.

Resizing in place would have quietly degraded every one of those links. The fix is to treat them as two separate jobs: a small WebP for display, the untouched original as the link target.

Doing that took 4.5MB down to 807KB with no visible change. The related trap is in the aspect-ratio note.

Still open

I have not worked out a good rule for srcset here. For a thumbnail grid, one 2× image seems simpler than three breakpoints, but I have not measured whether that holds on slow connections.