Guide
How to Compress Images for the Web Without Losing Quality
Updated March 2026 · 5 min read
Page speed is a ranking factor. Images are usually the heaviest assets on a web page — often 50-80% of total page weight. Compressing them properly can cut load times in half without any visible difference in quality.
1. Pick the right format
Not every format is suited for every image type:
| Format | Best for | Compression |
|---|---|---|
| JPEG | Photos, gradients, complex images | Lossy — adjustable quality |
| PNG | Screenshots, text overlays, transparency | Lossless — larger files |
| WebP | Everything (modern browsers) | Lossy + lossless — 25-35% smaller than JPEG |
2. Target the right file size
For most websites, these are good target sizes per image:
- Hero images: under 200 KB
- Content images: under 100 KB
- Thumbnails: under 30 KB
- Icons and logos: use SVG when possible, otherwise under 10 KB
A total page weight of 1-2 MB (including all assets) is a good benchmark. Google's Core Web Vitals penalize pages where the Largest Contentful Paint (LCP) element takes too long to load.
3. Resize before compressing
Don't serve a 4000px-wide image in a 800px container. Resize images to match their display size first. A 4000x3000 photo resized to 1200x900 can drop from 5 MB to under 500 KB before any quality reduction.
4. Use quality-based compression
For JPEG and WebP, reducing quality from 100 to 80 cuts file size dramatically with minimal visible difference. Going below 60 introduces noticeable artifacts. The sweet spot for most web images is 70-85 quality.
5. Compress without uploading
Many online compressors require you to upload images to their servers. That's unnecessary — modern browsers can handle compression locally using the Canvas API and Web Workers.
Try it now — free, private, no signup
CompressLocal runs entirely in your browser. Drop your images, pick a target size, and download — nothing is ever uploaded.
Compress images now6. Serve with proper caching
After compressing, make sure your server sends proper cache headers. For static assets with hashed filenames, use Cache-Control: public, max-age=31536000, immutable. For HTML and other mutable files, use max-age=0, must-revalidate.
Summary
- Choose the right format (WebP when possible)
- Resize to display dimensions
- Compress to a target size (80-200 KB for most images)
- Use a privacy-respecting tool that works locally
- Serve with immutable cache headers