How to Compress Images for the Web Without Losing Quality
Images account for the largest share of page weight on most websites. An unoptimized hero image can be 5–10MB; the same image at web-appropriate quality is 100–300KB. Compression is the single highest-impact performance optimization most sites can make.
- Reduce image file sizes by 50–80% without visible quality loss.
- Covers lossy vs lossless compression.
- Covers choosing the right format.
- Covers resolution and dimensions.
- Covers automating compression.
Lossy vs Lossless Compression
Lossy compression discards visual data the human eye is unlikely to notice — subtle color gradations, noise, and fine texture detail. JPEG and WebP use lossy compression by default. Lossless compression reduces file size without removing any data — every pixel is preserved exactly. PNG uses lossless compression. For photographs, lossy compression at quality 75–85 is virtually indistinguishable from the original while being 60–80% smaller. For screenshots, icons, and images with text, use lossless (PNG or lossless WebP) to avoid blur artifacts.
Choosing the Right Format
JPEG: Best for photographs and complex images with many colors. Use quality 75–85. PNG: Best for screenshots, logos, icons, and images with text or transparency. WebP: 25–35% smaller than JPEG at equivalent quality, supports both lossy and lossless. Supported in all modern browsers. AVIF: 30–50% smaller than WebP but slower to encode and decode. Browser support is now universal (Chrome, Firefox, Safari 16+). For most sites, WebP is the best default format in 2026.
Resolution and Dimensions
Before compressing, resize images to their display dimensions. A 4000×3000 photo displayed at 800×600 wastes 96% of its pixels — and compression doesn't fix this. Serve images at 2× their CSS display size for Retina/HiDPI screens (so a 400px-wide image should be 800px in the file), but no larger. The Image Compressor handles both resizing and compression in one step.
background-size animation or @property registered custom properties instead.Automating Compression
For production sites, automate compression in your build pipeline. Sharp (Node.js), Pillow (Python), and libvips handle server-side compression. CDNs like Cloudflare, Cloudinary, and imgix compress and convert images on the fly. For one-off optimization — blog images, portfolio photos, content uploads — the Image Compressor processes files instantly in your browser with no upload to external servers.