The Ultimate Guide to Image Compression Tools
Images account for 50%+ of page weight on most sites. This guide covers every major compression tool and when to use each one.
Images are the heaviest resources on most web pages, averaging 50-70% of total page weight. Choosing the right compression tool and format can cut image sizes by 80% without visible quality loss.
Image Format Comparison
| Format | Best For | Compression | Browser Support |
|---|---|---|---|
| AVIF | Photos, illustrations | Best (50-70% smaller than JPEG) | 93%+ |
| WebP | Photos, transparency | Great (25-35% smaller than JPEG) | 97%+ |
| JPEG | Photos (fallback) | Good | 100% |
| PNG | Screenshots, transparency | Lossless | 100% |
| SVG | Icons, logos, illustrations | Vector (tiny) | 100% |
Recommendation: Use AVIF with WebP fallback for photos. SVG for icons. PNG only for screenshots where text clarity matters.
Compression Tools Compared
Online Tools
Squoosh (squoosh.app)
- Built by Google Chrome team
- Side-by-side preview with quality slider
- Supports AVIF, WebP, JPEG, PNG, and more
- Best for: one-off optimizations, testing quality levels
TinyPNG / TinyJPG
- Simple drag-and-drop interface
- API available for automation
- Free tier: 500 images/month
- Best for: quick batch compression
Cloudinary
- Cloud-based image CDN with auto-optimization
- Automatic format negotiation (serves AVIF to supported browsers)
- Responsive image generation
- Best for: production image pipelines at scale
CLI Tools
sharp (Node.js)
npm install sharp
const sharp = require('sharp');
await sharp('input.jpg')
.resize(1200, 800, { fit: 'inside' })
.avif({ quality: 65 })
.toFile('output.avif');
Best for: build pipelines, batch processing, server-side conversion.
cwebp (WebP)
cwebp -q 75 input.png -o output.webp
avifenc (AVIF)
avifenc --min 20 --max 30 input.png output.avif
ImageMagick
convert input.jpg -quality 75 -resize 1200x800 output.jpg
Build Pipeline Integration
Next.js Image Component
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={1200}
height={800}
quality={75}
// Automatically serves AVIF/WebP based on browser support
/>
Vite Plugin
npm install vite-plugin-image-optimizer
Webpack
npm install image-minimizer-webpack-plugin
Quality Settings Guide
Not all images need the same quality level:
| Image Type | Quality | Why |
|---|---|---|
| Hero / above-fold | 75-80 | Visible, but compression artifacts hidden by size |
| Thumbnails | 60-70 | Small display size hides artifacts |
| Background images | 50-65 | Often overlaid with text/gradients |
| Product photos | 75-85 | Detail matters for purchase decisions |
| Blog illustrations | 65-75 | Good enough for editorial use |
Responsive Images
Serving a 3000px image to a 375px phone screen wastes bandwidth. Use responsive images:
<img
srcset="
/photo-400.avif 400w,
/photo-800.avif 800w,
/photo-1200.avif 1200w,
/photo-1600.avif 1600w
"
sizes="(max-width: 768px) 100vw, 50vw"
src="/photo-800.avif"
alt="Description"
width="1600" height="1067"
loading="lazy"
/>
The browser selects the smallest image that fits the viewport.
Automation Strategy
- Design phase: Export at 2x resolution, original quality
- Build step: Automatically compress to AVIF + WebP + JPEG fallback
- Runtime: Use
<picture>or Next.js Image for format negotiation - Monitoring: Track total image weight per page
Monitor Image Performance
Image optimization is not a one-time task. New images get added constantly. BadPageSpeed tracks your page weight so oversized images get caught early.
Monitor your page performance →
Related Reading
Ready to stop wasting ad spend?
Track your landing page performance, monitor Core Web Vitals, and calculate exactly how much slow pages cost you.
Start Free — No Credit Card