Image Optimization Guide: Why Your Images Are Killing Your Core Web Vitals
Images account for 45–50% of all bytes downloaded on the average web page. The largest image on your page is often the Largest Contentful Paint (LCP) element — and Google uses LCP as a ranking signal. A 1-second delay in page load reduces conversions by 7%. The format you choose and how you serve images has direct revenue implications.
Key Takeaways
- AVIF is 50% smaller than JPEG at equivalent quality; use it with JPEG fallback via <picture>
- WebP is 30% smaller than JPEG and has 97%+ browser support — safe to use today
- PNG for screenshots/logos (lossless); JPEG/WebP/AVIF for photographs (lossy)
- LCP should be under 2.5 seconds for "Good" Core Web Vitals — image optimization is the primary lever
- Lazy loading with loading="lazy" is a one-attribute win; don't lazy-load above-the-fold images
Image Formats: When to Use What
| Format | Compression | Transparency | Browser Support | Best For |
|---|---|---|---|---|
| JPEG | Lossy | No | Universal | Photographs, complex images |
| PNG | Lossless | Yes | Universal | Logos, screenshots, text overlays |
| WebP | Lossy/Lossless | Yes | 97%+ | Replacing JPEG/PNG today |
| AVIF | Lossy/Lossless | Yes | 92%+ | Best quality/size; use with fallback |
| SVG | Vector | Yes | Universal | Icons, logos, illustrations |
| GIF | Lossless (8-bit) | Limited | Universal | Use MP4/WebM video instead |
Serving Modern Formats with Fallbacks
The <picture> element lets you serve AVIF to supporting browsers with a JPEG fallback for older ones. The browser takes the first source it can handle.
Modern image serving with <picture>:
<picture>
<source
srcset="hero.avif"
type="image/avif">
<source
srcset="hero.webp"
type="image/webp">
<img
src="hero.jpg"
alt="Hero image"
loading="eager" /* LCP image — never lazy */
fetchpriority="high"
width="1200" height="630">
</picture>
Responsive Images with srcset
Serving a 2400px image to a mobile device with a 390px screen wastes 37× more bytes than necessary. The srcset attribute lets the browser choose the appropriate resolution based on viewport and device pixel ratio.
<img
src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 640px) 100vw, 800px"
loading="lazy">
Core Web Vitals: LCP and Images
Largest Contentful Paint (LCP) measures when the largest visible element renders in the viewport. For 70% of pages, the LCP element is an image. Google's ranking algorithm uses LCP as a signal since the Page Experience update.
≤ 2.5s
Good
Top 25th percentile
2.5–4.0s
Needs Improvement
Middle 50th percentile
> 4.0s
Poor
Bottom 25th percentile
Convert and Optimize Images
Image Converter & Optimizer
Convert images between JPEG, PNG, WebP, and other formats. Compress without visible quality loss and see file size reductions in real time.
Open Image Converter →