Reducing LCP on Image-Heavy Pages Without a Redesign

On the large majority of pages that fail their Largest Contentful Paint target, the culprit is the same: a hero image that's far larger — in file size, not necessarily dimensions — than it needs to be. The good news is that fixing this rarely requires a design change, just a delivery change.

Start with format and compression

A photo exported as an uncompressed PNG when it could be a well-compressed JPEG or, better, a modern format like WebP or AVIF, can easily be five to ten times larger than it needs to be with no visible quality difference at normal viewing sizes. This alone is often the single biggest lever available — a 2MB hero image becoming a 200KB one, with a viewer unable to tell the difference at a glance.

Serve the size that's actually displayed

A common and easy-to-miss issue: an image uploaded at its original camera resolution (often 4000+ pixels wide) being displayed at a fraction of that size in the actual layout, with the browser doing the resizing client-side. The full-resolution file still has to be downloaded before any resizing happens. Serving an image pre-sized to something close to its actual display dimensions — with a couple of responsive size variants for different screen widths — avoids paying that download cost for pixels nobody sees.

Prioritize the right image, deliberately

Browsers make reasonable but imperfect guesses about which resources to fetch first. The image that will become your LCP element — usually a hero image or the first prominent photo — benefits from an explicit priority hint, telling the browser "fetch this one first, before anything else," rather than leaving it to compete with everything else on the page for bandwidth.

Don't lazy-load the LCP image

Lazy loading is a genuinely good default for images further down a page — no reason to load a photo in the footer before anyone scrolls near it. Applied to the LCP candidate itself, though, it does the opposite of what you want: it deliberately delays the exact resource the metric is measuring, and it's a surprisingly common misconfiguration on sites that apply lazy loading uniformly to every image on the page rather than excluding the one at the very top.