Image Budget and Optimization Strategies
Allocate and optimize your image performance budget using modern formats (WebP, AVIF), responsive images, lazy loading, and compression techniques. Keep images under budget without sacrificing quality.
Detailed Explanation
Image Budget Optimization
Images typically account for 40-60% of a page's total weight. They are the single largest opportunity for performance improvement, yet many sites serve unoptimized images that are 5-10x larger than necessary.
Setting an Image Budget
For a total page budget of 600 KB (3G target), images should consume no more than 250-300 KB. For a 4G target of 1,350 KB, you might allow 500-600 KB for images.
Modern Image Formats
| Format | vs JPEG savings | Browser Support |
|---|---|---|
| WebP | 25-35% | 97%+ (all modern browsers) |
| AVIF | 40-50% | 92%+ (Chrome, Firefox, Safari 16+) |
| JPEG XL | 35-45% | Limited (Chrome behind flag) |
Using the <picture> element with format fallbacks:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" width="800" height="400">
</picture>
Responsive Images
Serve different sizes for different viewports using srcset:
<img
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
src="product-800.webp"
alt="Product photo"
>
This prevents mobile users from downloading a 1200px-wide image when they only need 400px.
Compression Quality Settings
- Hero images — Quality 75-85 (visible, important)
- Thumbnails — Quality 60-70 (small, less detail needed)
- Background images — Quality 50-65 (blurred or overlaid)
- Icons/logos — Use SVG when possible (resolution-independent, tiny file size)
Lazy Loading
Images below the fold should use native lazy loading:
<img src="photo.webp" loading="lazy" alt="...">
This excludes below-fold images from the initial load budget entirely. Only above-the-fold images (typically 1-3) count against the performance budget for the initial page load.
Budget Breakdown Example
For a product page with 5 images:
| Image | Dimensions | Format | Size |
|---|---|---|---|
| Hero | 1200x600 | AVIF | 80 KB |
| Product 1 | 800x800 | WebP | 45 KB |
| Product 2 | 800x800 | WebP | 45 KB |
| Thumbnail 1 | 200x200 | WebP | 8 KB |
| Thumbnail 2 | 200x200 | WebP | 8 KB |
| Total | 186 KB |
With lazy loading on Product 2 and thumbnails, the initial image budget is only 125 KB.
Use Case
Image budget optimization is essential for e-commerce sites, media-rich blogs, portfolio sites, and any page with hero images. A travel booking site with destination photos might set a 400 KB image budget per page, forcing the use of AVIF/WebP, responsive srcset, and lazy loading. Without an image budget, a single unoptimized JPEG can consume the entire page weight budget.