Images are the #1 cause of poor LCP scores. Here's exactly what to fix — and how to do it without touching your server.
Core Web Vitals are Google's three user-experience metrics that directly affect search rankings:
| Metric | What It Measures | Good Score |
|---|---|---|
| LCP — Largest Contentful Paint | How fast the main content loads | < 2.5 s |
| CLS — Cumulative Layout Shift | How much the page jumps around | < 0.1 |
| INP — Interaction to Next Paint | How responsive the page is to input | < 200 ms |
Images affect LCP and CLS directly. In most websites, the LCP element is a large hero image or banner.
The hero image is almost always the LCP element. Target under 100 KB for mobile viewports. Use WebP at quality 75–80 — most users cannot see the difference.
Add a preload hint in your HTML <head> so the browser fetches it immediately:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
Never put loading="lazy" on the image above the fold. Reserve lazy loading for below-the-fold images only.
A CDN serves images from servers close to the user, reducing Time To First Byte (TTFB) — which directly improves LCP.
Layout shift happens when an image loads and pushes content down the page. The fix is simple: always declare width and height attributes on every <img> tag.
<img src="photo.webp" width="800" height="450" alt="Description" loading="lazy">
Even if you override dimensions in CSS, declaring them lets the browser reserve the right amount of space before the image loads.
For responsive layouts, use the CSS aspect-ratio property or the padding-top trick to reserve space for images that scale with the viewport:
img { width: 100%; height: auto; aspect-ratio: 16/9; }
Switching from JPG to WebP typically reduces image sizes by 25–35% at the same visual quality. AVIF can reduce sizes by 40–50%. Both reductions directly improve LCP by reducing download time.
Use the HTML <picture> element to serve AVIF to modern browsers and WebP/JPG as fallback — no JavaScript required.
Native lazy loading (loading="lazy") defers off-screen images until the user scrolls near them. This reduces initial page weight dramatically on image-heavy pages.
loading="lazy" to all images below the foldwidth and height to prevent CLSServing a 2000px image to a 400px mobile screen wastes bandwidth and hurts LCP. Use srcset to serve appropriately sized images:
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description"
>
This alone can halve image payload on mobile, dramatically improving LCP on slower connections.
fetchpriority="high" and is preloadedloading="lazy"width and height attributesloading="lazy"srcset used for responsive imagesConvert and compress your hero images free — 100% in your browser.
⚡ Compress Images FreeUnder 2.5 seconds is "Good". 2.5–4.0 s is "Needs Improvement". Over 4.0 s is "Poor". Images are the primary driver of slow LCP on most pages.
Yes. Smaller formats (WebP, AVIF) reduce download time, which directly improves LCP. Format doesn't affect CLS — that's about declaring dimensions.
Open Chrome DevTools → Performance tab → record a page load. The LCP element is highlighted. Alternatively, use PageSpeed Insights (pagespeed.web.dev) — it identifies the LCP element and gives specific recommendations.