Image Size Budget and Optimization Tracking
Set image performance budgets for different page types. Track image sizes by format (WebP, AVIF, JPEG) and resolution, with strategies for responsive images, lazy loading, and CDN optimization.
Detailed Explanation
Image Performance Budgets
Images typically account for 40-60% of total page weight. Setting and tracking image budgets is one of the highest-impact performance optimizations available.
Image Budget by Page Type
| Page Type | Image Budget | Max per Image |
|---|---|---|
| Blog Post | 200 KB | 80 KB |
| Product Page | 300 KB | 100 KB |
| Landing Page | 250 KB | 120 KB |
| Portfolio | 400 KB | 150 KB |
| Homepage | 200 KB | 100 KB |
Format Impact on Budget
Modern formats dramatically reduce image weight:
| Format | Quality 80 | Compression |
|---|---|---|
| JPEG | 100 KB | Baseline |
| WebP | 60-70 KB | 30-40% less |
| AVIF | 40-50 KB | 50-60% less |
Using AVIF with WebP fallback can cut image budgets by half while maintaining visual quality.
Tracking Images in the Budget Tracker
Add each significant image as a resource entry:
- Hero images — The above-the-fold LCP candidate image
- Product images — Multiple product shots on e-commerce pages
- Thumbnails — Gallery or grid thumbnails
- Icons and logos — SVG preferred (add as "other" type)
- Background images — CSS backgrounds loaded via stylesheets
Optimization Strategies
- Responsive images — Serve different sizes with
srcsetandsizesattributes - Lazy loading — Add
loading="lazy"to below-the-fold images - Aspect ratio hints — Use
widthandheightattributes to prevent CLS - CDN optimization — Use image CDNs (Cloudinary, imgix) for automatic format negotiation
- Placeholder strategies — Use BlurHash or LQIP for perceived performance
The LCP Connection
The Largest Contentful Paint (LCP) element is often a hero image. Keeping the LCP image under 100 KB (compressed) and preloading it with <link rel="preload"> is one of the most effective ways to meet the 2.5-second LCP threshold.
Use Case
Image budget tracking is essential for content-heavy sites like e-commerce, media, and portfolio sites. A product page that loads 2 MB of unoptimized images will fail Core Web Vitals on mobile. By tracking each image against a budget, teams can catch oversized images before they reach production.