Image Compressor: How It Works
Image compression trades file size against visual quality. Done well the difference is invisible and the saving is 60–80%; done badly you get soft edges and blocky gradients. The technique is knowing which format and which quality setting suit the image in front of you.
Lossy or lossless
| Lossy | Lossless | |
|---|---|---|
| Formats | JPEG, WebP, AVIF | PNG, WebP lossless |
| Discards data | Yes, permanently | No |
| Typical saving | 60–90% | 10–30% |
| Best for | Photographs | Logos, screenshots, line art, transparency |
Lossy compression exploits the fact that human vision is far more sensitive to brightness than to colour detail, so it discards colour information first. This works beautifully on photographs, where colour varies smoothly, and poorly on sharp-edged graphics, where it produces visible artefacts around lines and text.
Quality settings
| Quality | Result |
|---|---|
| 95–100 | Near-lossless; large files, minimal visible gain over 85 |
| 80–90 | The practical sweet spot for web photographs |
| 60–75 | Acceptable for thumbnails and background images |
| Below 60 | Visible artefacts on most photographs |
Quality 85 is the standard recommendation because the file is typically half the size of quality 95 while being visually indistinguishable at normal viewing size. Going above 90 rarely earns its bytes.
Resize before you compress
This is the biggest saving available and the most commonly missed. A 4000-pixel-wide photograph displayed in a 800-pixel column is carrying 25 times more data than the screen can use. Resizing to the display size, then compressing, routinely reduces a file by 95% — far more than any quality setting alone.
Serve at roughly twice the CSS display width to look sharp on high-density screens, and no more.
Format selection
| Content | Use |
|---|---|
| Photograph | AVIF, with WebP and JPEG fallbacks |
| Logo or icon | SVG if vector, PNG otherwise |
| Screenshot with text | PNG, or WebP lossless |
| Needs transparency | PNG, WebP or AVIF |
| Animation | WebP or a video format, not GIF |
AVIF typically produces files 30–50% smaller than WebP at equivalent quality, and WebP is 25–35% smaller than JPEG. Encoding AVIF is slower, but that cost is paid once at build time while the saving is paid on every visit.
Generation loss
Each time a lossy image is decoded, edited and re-encoded, more information is destroyed — and it never comes back. Always keep the original and re-export from it rather than repeatedly compressing an already-compressed file. Re-saving a JPEG a dozen times produces visible degradation from nothing but the saving.
Metadata
Photographs carry EXIF data — camera model, settings, timestamp and often GPS coordinates. Stripping it saves a few kilobytes and, more importantly, removes location data you probably did not intend to publish. Most compressors strip it by default; it is worth confirming before uploading personal photographs anywhere.
Compression here happens entirely in your browser, so your images are not uploaded to any server.