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.
In short
Resize to the real display size first, save as WebP, and tune quality by eye rather than to a number. Keep PNG for graphics that need exact pixels.
Image Compressor
Shrink and convert images to WebP, JPEG or PNG on your own device — your photos are never uploaded.
Keep reading
Why your link preview isn't showing, and how to fix it
A shared link with no card is nearly always one of five things. How previews are fetched, which tags matter, and why Slack works when WhatsApp won't.
How to read a regular expression without panicking
Regex looks like line noise until you know the four things it is made of. A practical guide to reading any pattern, plus the mistakes that waste the most time.
How to read messy JSON, and fix the errors it throws
Deeply nested API responses are hard to hold in your head. How to navigate JSON structurally, and what the three most common parse errors actually mean.