The developer's guide to image compression ratios Written on . Posted in Tutorials.
Format first, compression second
Picking the right format has more impact than any compression setting:
| Format | Best for | Browser support |
|---|---|---|
| JPEG | Photos, complex scenes | Universal |
| PNG | Screenshots, transparency, logos | Universal |
| WebP | Photos + UI graphics (25–35% smaller than JPEG) | 95%+ |
| AVIF | Maximum compression (50% smaller than JPEG) | 90%+, slow encode |
| SVG | Icons, illustrations, anything that scales | Universal |
The quality sweet spot
For JPEG/WebP, quality 75–85 is virtually indistinguishable from the original on-screen but saves 40–60% in file size. Quality above 90 gives diminishing returns. Quality below 60 introduces visible artefacts in photos.
Run a quick test: open the same image at quality 80 and quality 95 in two browser tabs and zoom to 100%. In most cases you cannot tell the difference.
When to use lossless
- Source files and originals — always keep lossless masters
- Images with hard edges and text (screenshots, UI mockups) — JPEG artefacts are very visible here, use PNG or lossless WebP
- Images that will be re-edited — lossy → lossy re-compression compounds quality loss
The <picture> element — serve the right format to every browser
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>
Browsers pick the first format they support. This serves AVIF to Chrome, WebP to Safari, and JPEG as the universal fallback.
Compress images in your browser — free, no upload to server
Our image compressor runs entirely in your browser using the Canvas API. Your images never leave your device.