How Image Optimization Alone Can Fix Your LCP Score

If your PageSpeed Insights score is stuck in the 40s–60s, there’s a very high chance the culprit is your Largest Contentful Paint (LCP).

And in the majority of real-world cases we audit, that LCP element is an image — usually the hero.

The good news? You can often fix (or dramatically improve) LCP with image optimization alone. No full redesign. No rewriting JavaScript. Just smarter images.

Why LCP Is Still the Hardest Core Web Vital

Google continues to treat LCP as a primary ranking signal. A good LCP is under 2.5 seconds. Many sites still sit at 3.5–6+ seconds on mobile.

Common reasons the LCP image is slow:

• The file is simply too large (800 KB – 2.5 MB is still extremely common)
• Wrong format (JPEG or PNG instead of AVIF/WebP)
• No explicit dimensions → layout shift + delayed paint
• Missing fetchpriority="high"
• Served at full desktop size to mobile users
• Loaded behind other resources or delayed by JavaScript

Real Before & After Numbers

Here are typical results we see when teams only optimize the LCP image (hero) and leave everything else untouched:

These numbers come from converting the hero from high-quality JPEG/WebP to properly sized AVIF + correct markup. No other changes.

The Exact Markup You Should Copy

This is the pattern that consistently performs best in 2026:

Key points:

• AVIF first — modern browsers will use it
• WebP fallback — still excellent coverage
• JPEG last resort — for the remaining few percent
• Explicit width & height — prevents layout shift
• fetchpriority="high" — tells the browser this is the LCP candidate
• loading="eager" — do not lazy-load your LCP image

Step-by-Step Optimization Priority

1. Identify the real LCP element

Open Chrome DevTools → Performance or Lighthouse. Confirm it is actually an image (it usually is on marketing and blog pages).

2. Measure the current file

Check the Network panel. Note the size, format, and whether it is being resized by CSS only.

3. Create properly sized versions

Generate at least two or three widths (e.g. 800w, 1200w, 1600w). Never serve a 2400 px image to a 390 px mobile screen.

4. Convert to AVIF (and WebP)

Quality 45–55 for AVIF is the sweet spot for most photographic heroes. You will often cut file size by 40–60% with no visible quality loss.

5. Replace the markup

Use the <picture> pattern above. Add the attributes. Deploy. Re-test.

Common Mistakes That Kill LCP Gains

• Lazy-loading the hero image
• Forgetting width and height
• Using only one size for all viewports
• Serving PNG for photographs
• Putting the image behind a JavaScript framework that delays rendering
• Not setting fetchpriority="high"

How Much Is “Enough”?

You don’t need perfection on day one. Getting the LCP image under ~150–200 KB (AVIF) and correctly marked up is usually enough to push a site from “poor” into the “needs improvement” or even “good” range.

Once that is done, you can move on to secondary images, fonts, and third-party scripts.

Final Checklist

1. Confirm LCP element is the hero image
2. Create responsive AVIF + WebP versions
3. Use the <picture> markup with correct sizes
4. Add width, height, fetchpriority="high", loading="eager"
5. Re-test on mobile in PageSpeed Insights and Chrome DevTools
6. Celebrate the green scores

Image optimization is still one of the highest-leverage, lowest-effort improvements you can make for Core Web Vitals in 2026. Most sites leave massive gains on the table simply because they never fix the hero properly.

Convert Hero Images to AVIF →Compress Images Now