Guide
How to compress images without losing (visible) quality
Smaller files, faster pages, and pictures that still look right — here's the workflow that gets all three.
Big image files are the number one reason web pages feel slow. A single photo straight off a phone can be 4–8 MB — larger than an entire well-built web page should be. The good news: you can usually cut that by 80–90% with no difference the eye can see. The trick is understanding what compression actually does, and doing two separate things in the right order.
Resizing and compressing are not the same thing
People use these interchangeably, but they're different levers:
- Resizing changes the dimensions — the number of pixels (e.g. 4000×3000 down to 1600×1200). A photo displayed 800 pixels wide gains nothing from being 4000 pixels wide; those extra pixels are pure weight.
- Compressing keeps the dimensions but stores the pixels more efficiently, discarding detail the eye won't miss.
Do both, in that order, and the savings multiply. Resize to the largest size the image is actually shown at, then compress. Use the image resizer for the first step and the image compressor for the second.
How lossy compression works (the short version)
JPG, WebP and AVIF use lossy compression. They break the image into small blocks and simplify the ones your eye is least sensitive to — subtle colour shifts and fine gradients. A "quality" setting (often 0–100) controls how aggressive this is. The clever part is that the relationship isn't linear: dropping from quality 100 to 80 can halve the file with virtually no visible change, while going from 40 to 20 wrecks the picture for little further saving.
A simple workflow
- Start from the original. Every lossy save loses a little; compress the master once rather than a copy of a copy.
- Resize to the display size. For most web images, 1600px on the long edge is plenty; 800–1000px for in-article photos.
- Compress to ~80% quality and compare against the original. If you can't see a difference at normal viewing size, you're done.
- Pick a modern format if the web is the destination. WebP or AVIF will beat JPG at the same quality.
When to keep it lossless instead
Not everything should be squeezed. Screenshots of text, logos, diagrams and line art have hard edges that lossy compression turns fuzzy. For those, stay lossless — PNG, or lossless WebP. Our format guide covers which to choose.
How much smaller can you get?
| Step | Typical size (12 MP phone photo) |
|---|---|
| Original | 5.0 MB |
| Resized to 1600px | ~900 KB |
| + Compressed to quality 82 | ~250 KB |
| + Saved as WebP | ~170 KB |
That's a 5 MB file down to under 200 KB — a 96% reduction — with no visible loss at the size it's actually displayed. Multiply that across every image on a page and you've turned a sluggish page into a fast one.
None of the tools here upload your files: resizing and compression both run in your browser, so even large batches of personal photos stay on your device.