Core Web Vitals are a set of metrics defined by Google to measure the user experience of a web page. Since 2021, these metrics have been part of Google's ranking signals — meaning a poor score can penalise your SEO. Images are one of the main factors that influence these scores, for better or worse.
The three Core Web Vitals metrics
Google measures three dimensions of user experience via Core Web Vitals:
| Metric | What it measures | "Good" threshold | "Needs improvement" threshold |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Load time of the largest visible element | ≤ 2.5 seconds | 2.5 to 4 seconds |
| INP (Interaction to Next Paint) | Responsiveness to user interactions | ≤ 200 ms | 200 to 500 ms |
| CLS (Cumulative Layout Shift) | Visual stability of the layout | ≤ 0.1 | 0.1 to 0.25 |
LCP and images: the direct link
The LCP (Largest Contentful Paint) measures the time needed to display the largest visible element in the browser viewport. In the vast majority of web pages, this element is an image — hero image, main banner, product photo. A heavy or poorly loaded image is therefore directly responsible for a poor LCP score.
To improve image-related LCP:
- Use modern formats: WebP and AVIF are significantly lighter than JPEG and PNG at equivalent visual quality
- Preload the LCP image: add a <link rel="preload"> tag in the <head> to force the browser to load the hero image as a priority
- Avoid lazy loading on the LCP image: never apply loading="lazy" to the image that will be your LCP — this delays exactly what Google measures
- Serve images from a CDN: geographic proximity of the server reduces Time to First Byte (TTFB) which directly impacts LCP
- Size images correctly: never serve a 3000px wide image for an 800px display
Good to know: you can identify which image constitutes your LCP via PageSpeed Insights or Chrome DevTools (Performance tab → click on the LCP marker). This identification is the essential first step before any optimisation.
CLS and images: layout shifts
The CLS (Cumulative Layout Shift) measures unexpected layout shifts during loading. Images without defined dimensions are one of the most common causes of a poor CLS score: the browser does not know the image size before it loads, causing a page "jump" when it appears.
The solution is simple and universal: always specify width and height attributes on img tags. This allows the browser to reserve the exact space needed before the image is even downloaded.
INP and images: an indirect impact
The INP (Interaction to Next Paint) measures page responsiveness to user interactions (clicks, inputs). Images do not directly impact INP, but very heavy images that monopolise the browser's main thread can indirectly degrade this metric by blocking JavaScript event processing.
Decoding large images (multi-megabyte PNGs, high-resolution TIFFs) can cause main thread blocking. The decoding="async" attribute defers this decoding to avoid blocking interactions.
Image best practices for Core Web Vitals
- Format: use WebP or AVIF for all content images
- Dimensions: always specify width and height on all img tags
- Lazy loading: use loading="lazy" on all off-screen images, except the LCP image
- Preload: preload only the LCP image with <link rel="preload" as="image">
- Responsive images: use the srcset attribute to serve the appropriate size for each screen resolution
- Compression: compress all images with a tool like Squoosh, Sharp or ImageMagick before uploading
- CDN: host your images on a CDN to reduce geographic loading latency
Good to know: Google PageSpeed Insights and Lighthouse are the reference tools for measuring your Core Web Vitals and identifying problematic images. Google Search Console also offers a Core Web Vitals report based on real visitor data (CrUX — Chrome User Experience Report), more reliable than lab tests for assessing the real experience of your users.