Core Web Vitals are Google’s set of metrics that measure real-world user experience on websites. Images directly affect two of the three Core Web Vitals — and poorly optimized images are the most common reason sites fail these metrics. This guide explains exactly how images impact Core Web Vitals and what to do about it.
What Are Core Web Vitals?
Core Web Vitals are three specific metrics Google uses as ranking signals since May 2021. They are: Largest Contentful Paint (LCP) — measures loading performance, Cumulative Layout Shift (CLS) — measures visual stability, and Interaction to Next Paint (INP) — measures responsiveness. Google’s target scores are LCP under 2.5 seconds, CLS under 0.1, and INP under 200 milliseconds.
How Images Affect LCP (Largest Contentful Paint)
LCP measures how long it takes for the largest visible element in the viewport to load. In over 70% of websites, the LCP element is an image — typically the hero image, featured image, or largest product photo. A 2MB unoptimized hero image can push LCP to 5-8 seconds. The same image compressed and converted to WebP might be 150KB, achieving LCP under 2 seconds. Fixing your LCP image typically has the highest impact on overall Core Web Vitals scores.
How Images Affect CLS (Cumulative Layout Shift)
CLS measures how much page elements shift around while loading. Images without defined width and height attributes cause layout shift — the page renders, then the image loads and pushes content down, creating a disruptive user experience. Fix this by always specifying width and height attributes on all img elements. The browser can then reserve the correct space before the image loads, preventing layout shift entirely.
Image Optimization Actions for Better Core Web Vitals
| Action | Metric Improved | Expected Impact |
|---|---|---|
| Compress hero image | LCP | High |
| Convert images to WebP | LCP | High |
| Resize to display dimensions | LCP | High |
| Add width/height attributes | CLS | High |
| Lazy load below-fold images | LCP, INP | Medium |
| Preload LCP image | LCP | Medium |
| Use CDN for images | LCP | Medium |
How to Fix Your LCP Image
Step 1: Identify your LCP element using Google PageSpeed Insights or Chrome DevTools. Step 2: Compress it using the Image Compressor — target under 100KB for above-fold images. Step 3: Resize it to exactly its display dimensions using the Image Resizer. Step 4: Convert it to WebP using the JPG to WebP or PNG to WebP converter. Step 5: Add a preload link tag in your HTML head for the LCP image.
How to Fix CLS Caused by Images
Add explicit width and height attributes to all img elements. Use CSS aspect-ratio to maintain space for dynamically sized images. Avoid injecting images into the DOM after page load without reserving space. In WordPress, the built-in image block automatically adds width and height attributes — avoid inserting images as raw HTML without these attributes.
Best Image Format for Core Web Vitals
WebP is the best image format for Core Web Vitals. Its superior compression directly reduces file transfer time, improving LCP scores. Convert all above-the-fold images to WebP as the highest priority. For the LCP image specifically, also add the preload resource hint and ensure it is not lazy-loaded. Learn more about image optimization for SEO.
Frequently Asked Questions
Do images affect Google rankings?
Yes — images directly affect Core Web Vitals (LCP and CLS), which are official Google ranking factors. Large unoptimized images are the most common cause of poor Core Web Vitals scores.
What image size is best for Core Web Vitals?
Target under 100KB for above-fold images and under 200KB for all other content images. Use WebP format, resize to display dimensions, and apply compression using the Image Compressor.
What is the LCP image on my website?
Use Google PageSpeed Insights (free at pagespeed.web.dev) or Chrome DevTools Performance tab to identify your LCP element. It is typically the largest visible image above the fold on your homepage or main content pages.
Related Tools and Guides
- Image Compressor — reduce LCP image file size
- Image Resizer — resize to display dimensions
- JPG to WebP Converter — convert to best format for speed
- PNG to WebP Converter — convert PNG to faster WebP
- Image Optimization for SEO — Complete Guide
- What Is Image Compression?