Why Images Affect Core Web Vitals
LCP Impact
Images cause 72% of LCP issues
CLS Impact
Unoptimized images cause 65% of layout shifts
INP Impact
Heavy images increase INP by 300ms+
2025 Research Findings
HTTP Archive Data: Top-performing websites have:
- 90%+ of images in WebP/AVIF format
- Properly sized responsive images (srcset)
- Priority hints for critical images
Optimizing for Largest Contentful Paint (LCP)
LCP Image Best Practices
The LCP element is typically a hero image or banner. Optimize it with:
- Next-gen formats: AVIF (preferred) or WebP with JPEG fallback
- Preloading:
<link rel="preload" as="image" href="hero.avif"> - Priority hints:
fetchpriority="high"on LCP image - CDN optimization: Edge servers with automatic format conversion
- Quality adjustment: 75-85 quality for photos, 90+ for graphics
<picture>
<source srcset="hero.avif" type="image/avif" media="(min-width: 800px)">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Main product"
loading="eager"
fetchpriority="high"
width="1200"
height="630">
</picture>
Critical Warning
As of 2025, Google penalizes pages where LCP images:
- Take >2.5s to load on 4G
- Lack explicit width/height
- Are served in legacy formats (JPEG/PNG without next-gen fallbacks)
Eliminating Cumulative Layout Shift (CLS)
CLS Prevention Techniques
Image-related layout shifts occur when:
Proper Implementation
- Width/height attributes set
- Aspect ratio maintained
- Reserved space with CSS
- Lazy loading with placeholders
Common Mistakes
- Missing dimensions
- Unstyled images
- Late-loading above-fold images
- Responsive images without sizes
2025 Solution: CSS Aspect Ratio
/* Modern aspect ratio technique */
.img-container {
aspect-ratio: 16/9;
background: #f5f5f5;
}
/* Fallback for older browsers */
@supports not (aspect-ratio: 16/9) {
.img-container::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 ratio */
}
}
CLS Impact Study
Google 2025 Data: Pages with optimized images see:
- 0.05 CLS (vs average 0.15 for unoptimized)
- 12% lower bounce rates
- 18% higher ad viewability
Improving Interaction to Next Paint (INP)
INP Optimization Strategies
Images affect INP through:
- Decoding delay: Use
decoding="async" - Main thread blocking: Offload image processing to workers
- Memory pressure: Reduce image dimensions for viewport
- Animation performance: Use AVIF/WebP instead of GIF
2025 Best Practice: Adaptive Loading
// Load low-quality placeholder first
const img = new Image();
img.src = 'lqip.webp';
img.decode().then(() => {
// Then load high-quality version
const hiResImg = new Image();
hiResImg.src = 'hires.avif';
hiResImg.decoding = 'async';
hiResImg.loading = 'lazy';
});
2025 Format Comparison for Core Web Vitals
| Format | LCP Impact | CLS Impact | INP Impact | SEO Benefit |
|---|---|---|---|---|
| AVIF | ⭐⭐⭐⭐⭐ (Best) | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +15% |
| WebP | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | +12% |
| JPEG XL | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | +8% |
| JPEG | ⭐⭐ | ⭐⭐ | ⭐⭐ | +0% |
| PNG | ⭐ | ⭐⭐ | ⭐ | +3% |
Key 2025 Finding
Sites using AVIF with WebP fallbacks achieve:
- 40% faster LCP than JPEG
- 30% better CLS scores
- 25% improvement in INP
Implementation Checklist
Step-by-Step Optimization
- Audit current images with Lighthouse 12+
- Convert to AVIF/WebP using bulk tools
- Implement responsive images with srcset/sizes
- Add priority hints to LCP elements
- Set explicit dimensions to prevent CLS
- Use async decoding for non-critical images
- Monitor with RUM (Real User Monitoring)
Ready to Improve Your Core Web Vitals?
Try our free tools to optimize images in minutes: