How to compress images without ruining them

Images are usually the heaviest thing on a page, and most of that weight is avoidable. The biggest wins are not in the quality slider but in the dimensions, and in choosing a format designed for the job.

Resize first — it is the biggest saving

A photo straight from a phone might be 4000 pixels wide. Displayed in a 800-pixel column, three quarters of those pixels are discarded by the browser after being downloaded. Halving the dimensions removes roughly three quarters of the data before any compression is applied.

Size the image for its largest real display size, allowing for high-density screens — typically twice the CSS width. Beyond that you are paying for pixels nobody will ever see.

Choosing a format

WebP is the sensible default now that every current browser supports it: noticeably smaller than JPEG at equivalent visual quality, with transparency support. JPEG remains useful for compatibility with older software and workflows.

PNG is lossless, which means it never discards detail and also that it cannot compress a photograph well. Use it for screenshots with sharp text, flat graphics and anything needing exact pixels — and expect a photograph saved as PNG to be several times larger than it needs to be.

Finding the quality point

Lossy formats discard detail the eye is least likely to notice. Around 80% quality the difference is usually invisible at normal viewing size while the file is a fraction of its original weight. Below roughly 60% artefacts start showing in gradients and flat areas.

The right method is comparison, not a rule: adjust, look at both versions side by side, and stop at the point where you can see the difference. Images with large flat regions and sharp edges degrade earlier than busy photographs.