# Image formats that improve LCP on catalogues

AVIF, WebP and JPEG with width, srcset and fetchpriority. Hero images are usually the LCP element on stores.

- Date: 2026-08-05
- Category: Performance

Image formats LCP is the practice of serving the catalogue hero in AVIF or WebP at the right width, with JPEG fallback, width and height, srcset, sizes and fetchpriority, because that image is usually the Largest Contentful Paint element on a store. Changing a cache plugin without touching the hero does not move LCP.

I am a Gold Coast web developer. For 18 years I have watched Magento, Shopify and WordPress shops compress everything except the one file that paints. Google’s [optimize LCP article on web.dev](https://web.dev/articles/optimize-lcp) is the reference for the metric. This note is how I apply it to PLP banners, PDP galleries and campaign photography.

## Why image formats LCP work belongs on catalogues first

Image formats LCP work belongs on catalogues first because the LCP element on PLP and PDP is almost always an image, and catalogues have thousands of them. A homepage logo is not your problem. A 2400px PNG uploaded as “quality” is.

LCP is the time from navigation to when the largest text or image in the viewport is painted. On a jewellery PDP, that is the product still. On a collection, it is often the first tile or a full-bleed banner. On a photography shop, it is a high-resolution still that someone refused to resize because “it’s art.” Art still needs a 800w AVIF for a phone.

Ross Halfin Photography is a WooCommerce archive I shipped as contract work on an agency team. The whole point of the site is the frame. If you send a print-resolution JPEG to a listing grid, LCP dies and the archive feels broken. Tamannaah Fine Jewellery is Shopify Plus with hero slides and PDP photography that has to look expensive. Expensive is not megabytes. Expensive is a sharp AVIF that arrives early.

WordPress-specific delivery (srcset, nginx, media library) is in [WordPress AVIF and WebP image delivery](https://alanvo.com/blog/wordpress-avif-webp-images/). The metric-level pairing is [Core Web Vitals and INP for online stores](https://alanvo.com/blog/core-web-vitals-online-stores/). This page stays on formats, dimensions and priority.

## How image formats LCP actually get better

Image formats LCP get better when you pick a codec the browser can decode quickly, at a byte size that finishes before competing JS, and you tell the browser it is the LCP candidate.

Codecs: AVIF usually wins on stills at a given quality. WebP is the widely supported middle. JPEG is the fallback. PNG is for transparency you truly need, not for photos. GIF is not a hero format. I serve AVIF first in a picture element or via a CDN that negotiates Accept, then WebP, then JPEG. I do not serve AVIF only and leave Safari-old as a broken image. I check the support matrix at the time of the job.

![image formats LCP testing on a phone and laptop together](../../images/blog/image-formats-improve-lcp-1.jpg)

Width: the file’s pixel width should match the display width times device pixel ratio, capped. A 400px column does not need a 2000px file. srcset with 400w, 800w, 1200w, 1600w is enough for most PDPs. sizes must match the CSS. Wrong sizes is how you download 1600w on a phone.

fetchpriority="high" on the LCP image only. If you put high on every tile, you have no priority. loading="lazy" on the LCP image is a self-own. decoding="async" is fine on below-the-fold. Preload the LCP URL with as="image" and type matching the format you will actually use. Preloading JPEG then painting AVIF wastes the preload.

Do not hide the LCP image behind a JS slider that mounts after 1.5s. The first slide should be in the HTML. Autoplay video as LCP is a different, usually worse, conversation. A poster image can be LCP if the video is display:none until click. Measure.

CDN: a CDN that can convert on the fly is useful if the media library is full of huge JPEGs and you cannot rebuild every derivative this week. It is not a licence to keep uploading 12MB originals. Magento and Shopify have image services. Use them. Do not hotlink a Dropbox PNG.

Fonts and LCP: if LCP is text (a headline, not an image), this article is the wrong first move. Fix font-display and the text block. Most stores are image LCP.

Colour profiles and metadata are a quiet byte tax. A camera JPEG with a full ICC profile and 40KB of IPTC is normal in a photography shop and rare in a SKU factory. Strip what you do not need for display. Keep enough profile that a red gemstone does not shift on a wide-gamut phone. That is a merchandising call, not a default “strip all.”

I also check the theme’s placeholder. A 20px blur-up that then swaps to 2000px looks clever in a demo and costs two LCP-ish paints. If you use a tiny placeholder, it must not be the LCP element Google attributes. The real image has to be in the first HTML with dimensions so the swap does not become CLS plus a late LCP.

![Stopwatch and notebook during a speed pass](../../images/blog/image-formats-improve-lcp-2.jpg)

Shopify’s image_url filters and Magento’s image cache and WordPress’s intermediate sizes all lie if the theme requests `full` or a 2048px crop for a 280px column. Read the template, not the CDN dashboard. The dashboard will show a cache hit on the wrong file.

## Production checklist for image formats LCP

1. Identify the LCP element on mobile PDP and PLP in a trace or in Search Console’s example URLs. Screenshot it. Argue from that file, not from the homepage.
2. Weigh the current file. If it is over 200KB for a mobile hero, you have headroom. Many catalogues I see are 800KB-2MB.
3. Produce AVIF and WebP derivatives at real widths. Cap quality so artefacts are acceptable on a phone, not on a retouched billboard.
4. Wire srcset and sizes in the theme. Verify in DevTools which candidate was chosen.
5. Set width and height (or aspect-ratio) to stop CLS while you are there.
6. Add fetchpriority="high" to that one image. Remove lazy from it.
7. Add a matching preload only if the image is not discoverable early (unusual if it is in the first HTML). If you preload, keep it in sync when merchandising swaps the hero.
8. Kill slider JS in front of the first slide, or render slide one in HTML.
9. Stop page builders from outputting the original upload. WordPress in particular loves full-size in a “full width” block.
10. Re-measure lab LCP, then wait for field. Confirm you did not shift LCP to a cookie banner.

## What breaks when you chase image formats LCP

Serving AVIF from a CDN that caches the first request as JPEG for everyone. Check Vary: Accept or use separate URLs.

Using picture/source with mismatched aspect crops. CLS returns.

Shopify section that loads a 2000px image in a 200px mobile crop via CSS overflow hidden. Bytes still download.

Magento product gallery that initialises in JS and swaps a tiny placeholder for the large image after widgets run. LCP is the placeholder or a late swap. Render the main image in HTML.

Compression so aggressive that jewellery metal banding looks like a fault in the product. Quality is a merchandising sign-off, not a Lighthouse max.

Preloading three hero slides. You just created three LCPs.

Forgetting retina: 1x only looks soft on phones and then someone “fixes” it by putting back a 3000px JPEG.

![Compressed product photography on a light table](../../images/blog/image-formats-improve-lcp-3.jpg)

Lazy-loading a carousel’s first image because a plugin lazy-loads all img tags.

On Tamannaah, a hero slider is part of the flagship. Slide one has to be the LCP candidate in HTML. On Ross Halfin, a grid of frames needs small derivatives for the grid and larger ones only on the single image view. Same site, two LCP problems.

## How I measure image formats LCP

Lab: Lighthouse mobile, look at LCP element name and size. If it is not your product image, fix that first (overlays, banners).

Network: the LCP request’s decoded size and time to last byte plus decode. A tiny file that waits on a blocking script is not an image-format problem.

Field: Search Console LCP for the URL group. RUM if you have element attribution.

A/B on compression only if merchandising will look at both. Do not silently destroy a jewellery catalogue.

I do not quote fake conversion percentages for this work. Their Nibs’ +31% conversions and +48% orders are published rebuild numbers, not an AVIF toggle. Image formats LCP is how you keep photography from fighting that journey.

## Related work on this site

[Ross Halfin Photography](https://alanvo.com/work/ross-halfin-photography/) is WooCommerce where the catalogue is the photograph. [Tamannaah Fine Jewellery](https://alanvo.com/work/tamannaah-fine-jewellery/) is Shopify Plus where hero and PDP stills have to read as luxury without stalling mobile. Those are the two cases I point to when someone wants a 4MB PNG “for quality.”

For WordPress media pipeline and nginx cache of derivatives, read [WordPress AVIF and WebP image delivery](https://alanvo.com/blog/wordpress-avif-webp-images/). For how LCP sits next to INP on stores, read [Core Web Vitals and INP for online stores](https://alanvo.com/blog/core-web-vitals-online-stores/).

## FAQ

### Which image formats LCP should I pick in 2026, AVIF or WebP?

Use AVIF where encoding and support are in place, with WebP and JPEG behind it. Image formats LCP is not a single-codec religion. Measure the LCP file that actually arrives on iOS and Android for your audience.

### Can a CDN alone fix image formats LCP?

A CDN can convert and cache. It cannot fix wrong sizes, lazy LCP, or a slider that paints late. Do the HTML and theme work.

### Should I use fetchpriority on every product tile for image formats LCP?

No. Image formats LCP only needs high priority on the likely LCP element. Tiles below the fold should be lazy. If every tile is high, the browser cannot help you.

### Where is the official image formats LCP guidance?

Google’s [optimize LCP article](https://web.dev/articles/optimize-lcp) covers element types, priority, and common mistakes. Pair it with your platform’s image CDN docs. This post is the catalogue checklist I run on live shops.


![Checkout on a phone with a simple form](../../images/blog/image-formats-improve-lcp-4.jpg)


HTML version: https://alanvo.com/blog/image-formats-improve-lcp/