How to Compress Images for a Website
Images are usually the heaviest part of a page. Here is how to make them light.
1. Resize to the displayed size
A 4000 px photo displayed at 800 px wastes 96% of its pixels. Resize images to at most twice their displayed width for sharp results on retina screens.
2. Choose a modern format
WebP is supported by every modern browser and is typically 25–35% smaller than JPG. AVIF is even smaller for photos. Keep PNG only for graphics that need to be lossless.
3. Pick the right quality
Quality 75–82 is visually lossless for most photos. Compare before and after to find the lowest setting that still looks right.
4. Remove metadata
EXIF data can add tens of kilobytes to each image and may reveal private information. Strip it before publishing.
5. Automate it
Use batch processing for existing libraries and the API or a CMS plugin for new uploads, so every image is optimized automatically.