Image Optimization: How to speed up your site without losing quality
Image optimization reduces file size while preserving visual quality. Learn compression formats, responsive images, lazy loading, and Core Web Vitals impact.
Image optimization is the practice of delivering images at the smallest possible file size without noticeable quality loss. It’s one of the highest-ROI changes you can make to a site.
Why image optimization matters
Images typically account for 50-70% of total page weight. If you do nothing else to speed up a site, optimizing images alone can cut load time in half.
Three concrete benefits:
- Core Web Vitals: Large images are the #1 cause of poor LCP (Largest Contentful Paint).
- Bandwidth costs: Smaller images mean lower CDN and hosting bills.
- Mobile UX: Users on slow connections abandon pages that take more than 3 seconds to load.
The quick wins
1. Use modern formats
| Format | Best for | Compression vs JPEG |
|---|---|---|
| JPEG | Photos (legacy) | Baseline |
| WebP | Photos + transparency | 25-35% smaller |
| AVIF | Photos + graphics | 50% smaller |
| SVG | Icons, logos, simple graphics | Vector (infinite scale) |
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Hero banner showing product lineup" loading="eager">
</picture>
2. Resize to display dimensions
Don’t serve a 4000px wide image in a 400px container. Resize server-side or at build time:
<img src="/images/hero-800w.jpg"
srcset="/images/hero-400w.jpg 400w,
/images/hero-800w.jpg 800w,
/images/hero-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Product lineup on white background"
width="800" height="450">
3. Lazy load below-the-fold images
<img src="/images/below-fold.jpg" alt="Customer testimonial photo" loading="lazy">
Never lazy load your LCP image. The hero image, main product photo, or top banner should load immediately.
4. Set explicit dimensions
Always include width and height attributes to prevent layout shift (CLS):
<img src="/images/chart.png" alt="Traffic chart Q4 2025" width="600" height="400">
Common mistakes
Serving unoptimized uploads
Users upload 5MB photos directly from their phone. Compress them at upload time or during the build process.
Forgetting the LCP image
If your hero image has loading="lazy", you’ve just sabotaged your LCP score.
Using CSS background images for content
Background images can’t have alt text, can’t be lazy loaded natively, and don’t participate in LCP calculation. Use <img> for content images.
How to audit image optimization
- Use the SEO Audit Tool to scan for oversized images, missing dimensions, and format issues.
- Use the Chrome Extension to check individual pages as you browse.
- Run a Lighthouse audit in Chrome DevTools for specific recommendations per image.
Link back to the glossary
For the one-line definition: Image Optimization in the Glossary.