How do images affect Core Web Vitals?

Images are the primary cause of failing Core Web Vitals for 80% of websites. The hero image is the most common LCP element — if it loads slowly, your LCP score fails. Images without width/height attributes also cause CLS layout shifts.

What is the target file size for a hero image?

For a 1440px wide hero image, target under 150KB in WebP format at quality 80. Use a CDN and preload the hero image with to ensure it loads before the browser's render-blocking resources.

How do I fix 'properly size images' in Google PageSpeed Insights?

Resize your image to the maximum dimensions it is actually displayed at on your page. Use the srcset attribute to serve different sizes to mobile vs desktop. Never serve a 4000px image in an 800px container.

Core Web Vitals & Images: How to Fix LCP, CLS, and INP

Why Core Web Vitals Matter for SEO

Google uses Core Web Vitals as a direct ranking signal. Sites that fail these metrics are penalized in search rankings. Images are the primary cause of failure for 80% of websites.

The three metrics you need to fix:

LCP (Largest Contentful Paint) — how fast the main content loads
CLS (Cumulative Layout Shift) — how much content jumps around while loading
INP (Interaction to Next Paint) — how responsive the page feels

LCP — The Biggest Image Problem

LCP measures the time until the largest visible element loads. On most websites, this is a hero image. Target: under 2.5 seconds.

Common LCP Image Failures:

Image is too large — a 4MB hero photo when 200KB would suffice
Wrong format — JPEG/PNG instead of WEBP
Not preloaded — browser discovers the image late in rendering

How to Fix LCP:

Compress and resize the hero image. For desktop hero images (1440px wide), a quality-80 WEBP should be under 150KB. Use our Compress Image tool.

Preload your hero image in HTML:

Convert to WEBP using our JPG to WEBP converter for 30% smaller files.

Add a CDN (Cloudflare is free). CDN edge servers serve your images from locations close to users, dramatically reducing latency.

CLS — Images Causing Layout Jumps

CLS measures page layout stability. Images without explicit width and height cause massive CLS — they load in with zero size, then suddenly expand, pushing content down. Target: under 0.1.

Fix CLS from Images:

Always specify width and height attributes:

Or use CSS aspect-ratio:

img { aspect-ratio: 16/9; width: 100%; }

For Next.js users, the Image component handles this automatically.

INP — Images Causing Interaction Delays

INP measures responsiveness. Large images loaded synchronously block the main thread, causing interaction delays. Target: under 200ms.

Fix INP from Images:

Use lazy loading for below-the-fold images:

Avoid huge images above the fold — they compete for bandwidth with critical resources.

Use decoding="async" for non-critical images:

Measuring Your Score

Visit https://pagespeed.web.dev
Enter your URL
Look at the "Opportunities" section — image issues are listed with exact savings estimates

Quick Wins Checklist

[ ] Hero image: WEBP format, under 150KB, preloaded
[ ] All images: explicit width and height attributes
[ ] Below-fold images: loading="lazy"
[ ] Format: WEBP across the site
[ ] CDN: Cloudflare or similar