How to make your website's images lighter without losing quality
Updated:
Images are usually the heaviest part of a web page, and heavy pages load slowly on phones and lose visitors. Two changes fix most of it: the right dimensions and the right format. We measured each step on 17 photos to show how much each one really saves, and in which order to do them.
Resize before anything else
A photo straight from a phone is about 4,000 pixels wide, while a blog column shows it at around 800, or 1,600 real pixels on a high-density phone or laptop screen. Serving the full size wastes most of the download, and no format can make up for that.
The compression tools for JPG, PNG and WebP can cap the size for you: the Balanced level limits the longest side to 2,560 pixels and Strong to 1,600, and neither ever enlarges a smaller image. Strong suits almost every image inside an article; Balanced is for photos that fill a wide screen.
What each step saved
We started from 17 photographs of about 12 megapixels saved as high-quality JPGs, 1.5 MB each on average, and ran them through this site's tools. Converting to WebP alone halved them. Resizing did far more. Resizing and then converting to WebP brought the average photo down to 56 KB, 96% less than where it started.
| Version | Longest side | Average size | Saved |
|---|---|---|---|
| Original JPG (quality 92) | up to 4,032 px | 1.5 MB | — |
| WebP, High (85), full size | up to 4,032 px | 750 KB | 50% |
| Compress JPG: Balanced | 2,560 px | 300 KB | 80% |
| Compress JPG: Strong | 1,600 px | 91 KB | 94% |
| Balanced, then WebP | 2,560 px | 157 KB | 90% |
| Strong, then WebP | 1,600 px | 56 KB | 96% |
The right order
- Open Compress JPG (or Compress PNG for screenshots) and choose Strong, or Balanced for full-width photos. Upload up to 20 images at once and download them.
- Open JPG to WebP and upload the compressed files.
- Leave the quality option alone and download the WebP versions.
The mistake that undoes the savings
When you convert an already compressed JPG to WebP without choosing a quality, the WebP keeps the quality level of that JPG, and that is what made it 38–47% smaller in our test. Picking High (85) at this point asks for more quality than the compressed JPG still has: the Strong JPGs converted at High came out slightly larger than the JPGs themselves, at 100 KB on average instead of 91. Choose High (85) or Maximum (95) only when you convert from the original, full-quality photo.
Keep your originals
Store the original photos as masters. You can always make new web versions at another size or quality, but you cannot recover detail from an over-compressed copy. Then check the result where your visitors see it, on a phone: if it looks good there, it is good enough.
Beyond the file itself
Two small additions to the page make light images load even better. Give every image its width and height in the HTML, so the page does not jump while it loads. And add loading="lazy" to images further down the page, so the browser only downloads them when the visitor scrolls near them. Every current browser supports both.
How we tested
The 17 photos are the Unsplash photographs that ship with Edubuntu, scaled to 4,032 pixels on the long side where they were larger and saved as JPG at quality 92. Each step used this site's tools with the settings shown, through the same code and ImageMagick version that run on our servers. Busy, detailed photos shrink less than calm ones, so your own savings will vary around these averages.
Further reading: web.dev — Choose the right image format