Home › Guides › Reduce image file size
How to Reduce Image File Size Without Wrecking Quality
Large images slow websites down and get rejected by upload forms. Here is how to make them smaller sensibly, and which mistakes to avoid.
Three separate levers
File size is controlled by three things, and people usually only think about one of them.
- Pixel dimensions. How many pixels the image contains.
- Compression level. How aggressively detail is discarded.
- Format. How efficiently the data is stored.
Pulling the right lever for your situation makes an enormous difference. Pulling the wrong one ruins the picture.
Lever one: resize to what you actually need
This is almost always the biggest win and the one most often missed. A 6000 x 4000 photo displayed in a 800-pixel-wide column is carrying roughly fifty times more data than the page can show.
Halving both dimensions cuts the pixel count to a quarter, and the file size usually falls by a similar amount, with no visible difference at the size it is actually displayed.
Work out the largest size the image will ever be shown at, and resize to that. For a typical website that is 1600 to 1920 pixels wide at most.
Lever two: compression, used with care
JPG and WEBP let you trade quality for size on a sliding scale. The relationship is not linear, and that is the useful part.
| Quality setting | Result |
|---|---|
| 100 | Very large files, no visible gain over 90 |
| 85 to 90 | The sweet spot for photographs |
| 70 to 80 | Noticeably smaller, slight softening on close inspection |
| Below 60 | Visible blocks and fringing; avoid for anything that matters |
Dropping from 100 to 90 typically removes half the file size and almost nothing you can see. Dropping from 90 to 60 saves much less and costs much more.
Lever three: pick a better format
Converting a photograph from PNG to JPG can cut the file to a tenth of its size with no meaningful loss, because PNG is simply the wrong tool for photographic content. Going the other way, converting a logo from JPG to PNG usually makes it both smaller and cleaner.
WEBP generally beats both for web use. See our format comparison for the details.
Mistakes that destroy images
- Re-saving a JPG repeatedly. Each save discards more detail. Edit from a lossless master and export once.
- Compressing hard, then enlarging. Enlargement magnifies compression artefacts. If you must do both, enlarge first and compress last.
- Using PNG for photographs. Huge files for no benefit.
- Resizing up to meet a minimum, then compressing hard to meet a maximum. You end up with a large file full of visible damage. Resize sensibly instead.
A workflow that keeps quality
- Keep a lossless master (PNG or the original camera file). Never overwrite it.
- Decide the largest display size the image needs.
- Resize a copy to those dimensions.
- Export as JPG or WEBP at quality 85 to 90.
- Check it at full size before publishing.
When smaller is not the answer
Sometimes the requirement runs the other way: a marketplace demands 2000 pixels and your file is 900. Compressing will not help, and stretching in an editor produces the soft result described in our article on enlargement blur.
In that case, upscale the image first to get the pixels you need, then apply sensible compression to bring the file size back down. Doing it in that order gives a far better result than the reverse.