Core Web Vitals and Image Optimization: How AVIF Improves Your Scores
Google uses Core Web Vitals as a ranking signal. The most common reason sites fail Core Web Vitals is a slow Largest Contentful Paint, and the most common LCP element is an image. Switching to AVIF is the single highest-impact change you can make to fix a failing LCP score.
What Are Core Web Vitals?
Core Web Vitals are three performance metrics that Google measures for every page and uses as part of its ranking algorithm since May 2021:
Images directly affect LCP and CLS. They indirectly affect INP by competing for bandwidth and CPU resources during page load.
Why Images Are the Primary LCP Failure Cause
Google's Chrome User Experience Report (CrUX) shows that hero images, banner photos, and product images are the LCP element on over 70% of web pages. An LCP score above 2.5 seconds earns a "Needs Improvement" rating, and above 4 seconds earns a "Poor" rating.
A 200 KB JPEG hero image on a 4G mobile connection (10 Mbps) takes approximately 160 milliseconds just for the transfer. At 50 KB as AVIF, that same transfer takes 40 milliseconds. The 120 millisecond difference is significant when you are fighting to get under 2.5 seconds total.
PageSpeed Insights specifically flags "Serve images in next-gen formats" and "Efficiently encode images" as Opportunities when it detects JPEG or PNG that could be served as AVIF or WebP.
How AVIF Fixes LCP
The LCP time for an image has three components: resource discovery time, resource load time, and render time. AVIF directly reduces resource load time because the file is smaller and downloads faster on any connection speed.
| Connection | 200 KB JPEG download | 80 KB AVIF download | Time saved |
|---|---|---|---|
| 3G (1 Mbps) | 1,600 ms | 640 ms | 960 ms |
| 4G (10 Mbps) | 160 ms | 64 ms | 96 ms |
| WiFi (50 Mbps) | 32 ms | 13 ms | 19 ms |
On mobile connections, the difference is the margin between a passing and failing LCP score for many pages.
How AVIF Affects CLS
Image format does not directly cause or prevent layout shift. CLS happens when an image loads and pushes other content down because the browser did not reserve space for it. The fix is always the same regardless of format: declare the image dimensions in HTML.
<!-- Bad: no dimensions, causes CLS --> <img src="product.avif" alt="Product"> <!-- Good: explicit dimensions prevent CLS --> <img src="product.avif" alt="Product" width="600" height="600">
Smaller AVIF files do load faster, which reduces the window during which a layout shift can occur. But declaring dimensions is the required fix for CLS.
Image Optimization Checklist for Passing Core Web Vitals
<picture> element to serve the best format each browser supports.<link rel="preload"> tag in the document head for the hero image so it starts downloading immediately.width and height attributes to prevent CLS.loading="lazy" on all images not visible in the initial viewport.Fix Your LCP Score with AVIF
Convert your images to AVIF and take the first step toward passing Core Web Vitals. Free, instant, no sign-up.
Convert Images Free