Reviewed November 8, 2026

AVIF vs WebP for Hero Images: The Cheapest LCP Win on Shopify

Your hero image is 1.2 megabytes, and it is the largest thing on the page. It is also the Largest Contentful Paint element, which means the page is not done loading until that image finishes, and your mobile LCP is whatever that image takes.

The format is the cheapest fix in the speed toolkit. A JPEG hero at 1.2 megabytes becomes a WebP at about 800 kilobytes and an AVIF at about 600 kilobytes, with no visible change. The conversion takes minutes, and the LCP improvement is usually the biggest single win available.

The numbers, and what they mean for LCP

AVIF typically compresses 50 percent smaller than JPEG at the same visual quality, and WebP about 30 percent smaller. On a hero image, that is the difference between 1.2 megabytes and 600 kilobytes, and on a mobile connection it is the difference between an LCP of 4 seconds and an LCP under the 2.5 second threshold Google calls good.

Shopify's CDN already serves WebP automatically when the browser supports it, which means the platform has already done half the work. The AVIF step is yours: upload AVIF files for the hero and the above-the-fold images, and the CDN serves them as uploaded. The product thumbnails can stay as they are, because they are below the fold and do not decide LCP.

How to convert without breaking anything

Use the picture element with three sources: AVIF first, WebP second, JPEG last. The browser picks the first format it supports, so a modern browser gets AVIF, an older browser gets WebP, and the oldest gets JPEG. Nobody sees a broken image, and the fallback costs nothing.

Convert the hero first, then the collection hero, then the product main image. Those three are the LCP elements on the three page types that matter, and converting them moves the metric on every template. The rest of the catalog can wait, because a thumbnail that loads half a second faster changes nothing a shopper will notice.

The limit of the format fix

A format change cannot fix a hero image that is the wrong size. A 4000 pixel wide image displayed at 800 pixels is still 4000 pixels of data, and the format saves a percentage of a number that should have been smaller in the first place. Size the image to the display width first, then convert the format, and the two fixes multiply.

The same limit applies to the rest of the page. An AVIF hero on a page with twelve app scripts is still a slow page, because the scripts, not the image, are the bottleneck. Fix the image first, because it is the cheapest win, and then audit the scripts, because they are the next one.

Frequently asked questions

What is AVIF?

AVIF is an image format based on the AV1 video codec. It compresses better than WebP and much better than JPEG, typically 50 percent smaller than JPEG at the same quality. Browser support is now broad, covering Chrome, Firefox, Safari, and Edge.

Does Shopify serve AVIF automatically?

Shopify's CDN serves WebP automatically when the browser supports it, but it does not convert your uploads to AVIF. If you want AVIF, you upload AVIF files, and the CDN serves them as uploaded. The automatic optimization covers WebP, not AVIF.

Should I convert all my product images to AVIF?

No. Convert the hero image and the above-the-fold images first, because those are the ones that decide Largest Contentful Paint. Product thumbnails and below-the-fold images matter less, and the conversion work is better spent where the metric moves.

What if a browser does not support AVIF?

Use the picture element with a WebP fallback and a JPEG fallback, in that order. The browser picks the first format it supports, so old browsers get the JPEG and modern browsers get the AVIF, and nobody sees a broken image.