Web Performance & Images
Images are the #1 cause of slow websites. Here's how to fix that.
Quick Answer
Images account for 50%+ of page weight on most websites. Use modern formats (WebP/AVIF), compress to quality 80-90%, serve at correct dimensions, lazy load below-the-fold images, and preload hero images for best Core Web Vitals.
How Images Impact Performance
LCP (Largest Contentful Paint)
The hero image is usually the LCP element. Unoptimized images directly hurt LCP score.
CLS (Cumulative Layout Shift)
Images without width/height attributes cause layout shifts when they load.
TBT (Total Blocking Time)
Image processing in JavaScript can block the main thread and delay interaction.
Image Optimization Checklist
- Format: Use WebP (25-35% smaller than JPG) or AVIF (50%+ smaller)
- Compression: Quality 80-90% for imperceptible quality loss
- Dimensions: Serve at the exact display size, not larger
- Lazy loading: Use
loading="lazy"for below-the-fold images - Preloading: Use
<link rel="preload">for hero/LCP images - Dimensions: Always set
widthandheightattributes - Decoding: Use
decoding="async"for non-critical images - CDN: Serve images from a CDN for faster delivery
- Caching: Set long cache headers for static images
Preloading Hero Images
Preload your LCP image to improve LCP by 0.5-1.0 seconds:
<link rel="preload" as="image" href="hero.webp" />
<!-- For responsive images -->
<link rel="preload" as="image"
href="hero.webp"
imagesrcset="hero-400.webp 400w, hero-800.webp 800w"
imagesizes="(max-width: 600px) 100vw, 800px"
/>Format Impact on Performance
| Format | vs JPG Size | LCP Impact | Browser Support |
|---|---|---|---|
| AVIF | -50%+ | Best improvement | 92% |
| WebP | -25-35% | Good improvement | 97% |
| JPG | Baseline | Baseline | 100% |