Since May 2021, Google officially included Core Web Vitals in its ranking criteria. This set of 3 metrics measures user experience: LCP (load speed), FID/INP (interactivity), and CLS (layout stability). Images directly affect 2 of these 3 metrics.
LCP (Largest Contentful Paint) — Images Are the #1 Cause
LCP measures the time for the largest element in the viewport to render. In 75% of cases, that element is an image (hero image, product photo, banner). Google requires LCP under 2.5 seconds for a "Good" score.
According to Web Almanac 2025, images are the LCP element on 72% of web pages. Image format is the single factor with the biggest impact on LCP scores — switching from JPG to WebP typically improves LCP by 0.3–0.8 seconds.
Optimizing LCP Through Images
- ▸Use WebP: Reduces file size 25–35%, loads noticeably faster
- ▸Preload hero image: Add `<link rel="preload" as="image">` for your LCP element
- ▸Don't lazy load hero images: Hero images must load immediately, never use `loading="lazy"`
- ▸Responsive images: Use `srcset` to serve the right size for each screen
- ▸Compress correctly: WebP quality 80–85% is the sweet spot
- ▸CDN: Serve images from servers close to your users
CLS (Cumulative Layout Shift) — Images Without Dimensions
CLS measures unwanted layout shifts. Images without explicit `width` and `height` attributes are the most common cause of high CLS — the browser doesn't know the image dimensions in advance so can't reserve space.
- ▸Always add `width` and `height` attributes to `<img>` tags
- ▸Use CSS `aspect-ratio` to maintain ratios
- ▸Avoid inserting dynamic images (ads, banners) in the middle of content
- ▸Skeleton loading reserves space while images load
Checking Image-Related Core Web Vitals
- ▸PageSpeed Insights: Check "Opportunities" — typically "Properly size images", "Serve images in next-gen formats"
- ▸Chrome DevTools > Performance: LCP element is highlighted in red
- ▸Google Search Console > Core Web Vitals report: See which pages are "Poor" or "Needs Improvement"
- ▸WebPageTest: Filmstrip view shows which images load slowest
Image Optimization Workflow for Core Web Vitals
- 1Run PageSpeed Insights — note all image-related warnings
- 2Use SEO Image Pro to convert all images to WebP (quality 82%)
- 3Re-upload images, update URLs if needed
- 4Add width/height attributes to all img tags
- 5Preload hero image with resource hint
- 6Run PageSpeed again — compare before/after scores