Images account for an average of 50% of web page weight. Unoptimized images are the single biggest cause of slow Largest Contentful Paint (LCP) scores and poor Core Web Vitals. This practical guide provides a step-by-step workflow for optimizing images that balances visual quality with performance.
Why Images Matter for Core Web Vitals
- LCP (Largest Contentful Paint): The hero image is often the LCP element. A slow-loading image directly hurts your LCP score. Target: under 2.5 seconds.
- CLS (Cumulative Layout Shift): Images without explicit width/height cause layout shifts as they load. Always specify dimensions.
- Total page weight: Oversized images consume bandwidth, especially on mobile connections.
The Optimization Workflow
Follow this order for maximum impact:
- Right-size: Resize to the largest displayed size (accounting for 2x retina). A 400px container needs a 800px image maximum.
- Right-format: Use AVIF (smallest) with WebP fallback and JPEG as final fallback.
- Right-compression: Quality 75-85% for lossy formats. Preview before committing.
- Right-delivery: Responsive srcset, lazy loading, and CDN caching.
Format Selection Decision Tree
- Photograph or complex image? → AVIF > WebP > JPEG
- Screenshot, text, or sharp edges? → WebP lossless > PNG
- Needs transparency? → WebP > PNG (avoid JPEG)
- Simple icon or logo? → SVG (vector, scales perfectly)
- Animation? → WebP animated > MP4 video > GIF (last resort)
Compression Quality Guidelines
| Format | Sweet Spot | Floor | Typical Savings vs Original |
|---|---|---|---|
| JPEG | 75-85% | 50% | 60-80% |
| WebP lossy | 75-85% | 60% | 70-85% |
| AVIF | 60-80% | 40% | 80-90% |
| PNG (lossless) | N/A | N/A | Use WebP lossless instead |
Responsive Images with srcset
<img
src="photo-800w.jpg"
srcset="photo-400w.jpg 400w,
photo-800w.jpg 800w,
photo-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 900px) 50vw,
33vw"
alt="Description"
width="1200"
height="800"
loading="lazy"
>The browser selects the most appropriate image size based on viewport width and pixel density, downloading only what is needed.
Lazy Loading
Add loading="lazy" to images below the fold. Do NOT lazy-load the LCP image (hero/banner) — it should load immediately. For the LCP image, consider fetchpriority="high" and preloading in the <head>.
Compress and resize images instantly with the Image Compressor and Image Resizer on WizlyTools.