Hero Image Performance Budget
Set specific performance budgets for hero images, the most common LCP element. Covers format selection, responsive sizing, preloading, and compression targets for above-the-fold hero imagery.
Detailed Explanation
Hero Image Performance Budgets
The hero image is the largest above-the-fold visual element on most pages — and it is the LCP element on over 70% of web pages. Budgeting the hero image is one of the most impactful performance optimizations.
Hero Image Budget Targets
| Connection | Max Size | Max Dimensions |
|---|---|---|
| Slow 3G | 50 KB | 800px wide |
| Fast 3G | 80 KB | 1200px wide |
| 4G | 100 KB | 1600px wide |
| Desktop | 120 KB | 2000px wide |
Format Comparison for Hero Images
For a typical 1200x600px hero image at quality 80:
| Format | Size | Savings vs JPEG |
|---|---|---|
| JPEG | 120 KB | Baseline |
| WebP | 75 KB | 38% smaller |
| AVIF | 50 KB | 58% smaller |
Responsive Hero Image Implementation
<picture>
<source
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
type="image/avif"
sizes="100vw"
/>
<source
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
type="image/webp"
sizes="100vw"
/>
<img
src="hero-1200.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="100vw"
width="1200"
height="600"
alt="Hero description"
fetchpriority="high"
/>
</picture>
Preloading the Hero Image
<link
rel="preload"
as="image"
href="hero-1200.avif"
type="image/avif"
imagesrcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
imagesizes="100vw"
/>
Important: Never Lazy Load the Hero
The hero image is the LCP element. Adding loading="lazy" to it delays LCP by the intersection observer threshold. Always use fetchpriority="high" and preload instead.
Tracking Hero Images
In the Performance Budget Tracker, add the hero image as a single entry with the expected mobile size (the most constrained viewport):
hero-image.avif— 50 KB (Image type)
This represents your mobile hero budget. Desktop users will load a larger version, but mobile is the budget constraint.
Use Case
Hero image budgets are critical for landing pages, news articles, and e-commerce product pages where the primary visual is a large image. A single unoptimized hero image can consume the entire page budget. By setting a specific hero image budget and tracking it separately, teams ensure the most impactful image is always optimized.