Performance Hub
Image Size Reduction for Web Performance
Reduce image file sizes for better web performance. Learn file budgets, size targets, format guidance, and compression techniques for faster websites.
Web Image Size Budgets
Setting and enforcing image size budgets is the foundation of web performance. Every image on your page should fit within its allocated budget to ensure fast loading.
| Image Type | Target Size | Max Dimensions | Format |
|---|---|---|---|
| Hero image | Under 100KB | 1200-1920px | AVIF/WebP |
| Product photo | Under 200KB | 1200px | WebP |
| Blog image | Under 80KB | 800-1200px | WebP |
| Thumbnail | Under 30KB | 200-400px | WebP/JPEG |
| Logo/icon | Under 20KB | 200px | SVG |
| Background | Under 150KB | 1920x1080 | WebP |
Techniques for Image Size Reduction
- Resize to display dimensions: Never serve images wider than their container.
- Convert to modern formats: WebP reduces sizes by 25-35% vs JPEG. AVIF by 40-50%.
- Compress at optimal quality: 82-85% for photos, lossless for graphics.
- Strip metadata: Remove EXIF, GPS, and editing data.
- Use responsive srcset: Serve different sizes to different devices.
- Implement lazy loading: Defer below-fold images.
- Serve via CDN: Reduce latency and enable auto-optimization.
6
Size Targets
7+
Formats
LCP
Optimized
Target Size Tools
Try CompressNeo
Compress your images in bulk locally
No files are uploaded to any server. Compress and convert JPEGs, PNGs, WebPs, AVIFs, and SVGs entirely in your browser.