Image Optimisation for LCP — Make Your Hero Image Load Fast

Short answer: find which image is your LCP element, then do five things. Serve it at the size it is displayed, in a modern format, with responsive srcset. Put it in the HTML as an img tag so the browser discovers it immediately. Mark it fetchpriority="high". Never lazy-load it. Give it explicit width and height. Lazy-load everything below the fold instead.

Table of Contents

1. Find the LCP Image
2. Right Size
3. Right Format
4. Early Discovery and Priority
5. Everything Else on the Page
6. Key Takeaways

Find the LCP Image

Open the page in browser developer tools, run a performance recording, and look for the LCP marker. It names the element. Check on a mobile viewport: the LCP element on a phone is often different from desktop.

Common surprises:

• The LCP is a banner image, not the product photo.
• It is a background image set in CSS.
• It is the first slide of a carousel (carousels).
• It is a headline, and the image is not the issue at all.

Optimising the wrong image changes nothing (what LCP is).

Right Size

The most common waste is serving an image far larger than its display size. A 2400-pixel-wide photo shown in a 390-pixel-wide phone screen is several times more data than needed.

Use responsive images so each device downloads an appropriate file:

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w, /hero-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="1600" height="900"
  fetchpriority="high"
  alt="Dashboard showing a session recording">

• srcset lists the available widths.
• sizes tells the browser how wide the image will be displayed, so it can choose before layout.
• width and height reserve space and prevent layout shift (CLS).

A wrong sizes value is a frequent bug. If it says 100vw for an image shown at half width, the browser downloads a file twice as wide as needed.

Account for high-density screens. A 390-pixel slot on a 3x phone can use up to 1170 pixels. In practice 2x is enough for photographs, and few people can tell the difference.

Right Format

Use picture to offer formats with a fallback:

<picture>
  <source type="image/avif" srcset="/hero-800.avif 800w, /hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="/hero-800.webp 800w, /hero-1600.webp 1600w" sizes="100vw">
  <img src="/hero-800.jpg" width="1600" height="900" fetchpriority="high" alt="Product photo">
</picture>

Then compress. Quality settings around 70 to 80 for photographs are usually indistinguishable from the original at a fraction of the size. Check the result by eye on a phone, especially for product photos where detail sells (product galleries).

An image CDN or your platform's built-in image service can do resizing and format selection automatically. Most store platforms and frameworks have one. Use it.

Early Discovery and Priority

The browser can only start downloading an image once it knows about it.

If the image must be a CSS background, preload it:

<link rel="preload" as="image" href="/hero-800.webp" fetchpriority="high">

Use fetchpriority="high" on one image per page. Marking several defeats the purpose.

Slow server response delays everything, images included. If the HTML arrives late, the image starts late (TTFB).

Everything Else on the Page

• Lazy-load below-the-fold images with loading="lazy". This frees bandwidth for the hero.
• Carousels: load the first slide eagerly and the rest lazily.
• Do not preload many images. Preloads compete with each other.
• Avoid a large image hidden on mobile with CSS. It may still be downloaded.
• Video heroes: use a compressed poster image as the LCP element and load the video after.
• Use explicit dimensions on every image.
• Serve with long cache lifetimes and versioned file names.

Confirming the Improvement

Lab tools show the change immediately. Real-user data shows whether visitors got it.

1. Record the baseline: mobile LCP at the 75th percentile for the page.
2. Ship the change.
3. Compare after a week or two of real traffic, same page, same device class (performance).
4. Watch a few mobile sessions on the page. In a recording you can see how long the visitor looked at an empty space where the image should be, and whether they waited.

On an e-commerce product page, the main image is usually both the LCP element and the thing the shopper came to see. A late image there is not only a metric. It is a visitor looking at a grey box and deciding whether to stay (low-end devices).

Key Takeaways

• Identify the actual LCP image, on mobile.
• Right size with srcset and sizes; modern format; compressed.
• In the HTML, high priority, never lazy.
• Lazy-load the rest; confirm with real-user data.

Conclusion

One image decides how fast most pages feel. Give it the right size, the right format, and a head start.

Start free with DeepSync.