How to compress images for the web
Big images are the number one reason web pages load slowly. The good news is that you can usually cut image weight by 70 to 90 percent with no visible drop in quality. Here is how to do it properly.
1. Resize before you compress
The biggest win is dimensions. A 4000px photo shown in an 800px column is wasting almost all of its pixels. Work out the largest size the image is ever displayed at, then resize to roughly twice that for high-DPI screens.
A rough guide:
- Full-width hero: 1920 to 2560px wide
- Content image: 1200 to 1600px wide
- Thumbnail: 400 to 600px wide
2. Pick the right format
- AVIF. The smallest files, and it works well for photos and most graphics. Reach for it first.
- WebP. Nearly as small, supported everywhere, and it keeps transparency.
- JPEG. A safe fallback for photos that have no transparency.
- PNG. Worth it only for graphics that have to stay lossless, like some logos and pixel art.
3. Choose a sensible quality
For lossy formats, a quality of 75 to 82 is almost always impossible to tell apart from the original, and it is far smaller. Do not ship images at quality 100. You are paying a big size penalty that nobody can see.
If you have a hard budget, say a 150 KB hero image, use a target-size mode and let the tool find the highest quality that still fits.
4. Strip the metadata
Photos carry EXIF data: the camera model, the settings, and often your GPS location. It adds weight and leaks privacy. Re-encoding removes it for you.
5. Check with a before and after view
Always look at the result. A side-by-side slider makes it obvious whether compression added any artifacts before you commit.
You can do every step above in the compressor. Resize, convert, target a size, and compare, all in your browser, with nothing uploaded.