⏱ 15 min read

WebP and AVIF Images in Shopify: What Actually Needs Optimising

WebP or AVIF? That question costs you less time than you think, because Shopify already answers it for you. The CDN converts your images to modern formats automatically as soon as the browser supports them. Yet stores spend hours converting every image by hand or installing a bulk app that does exactly the same thing twice over. Real Shopify image optimisation lives elsewhere: in dimensions, the delivery path, source file weight and the hero image. This guide cleanly separates what Shopify handles automatically from what genuinely belongs to you.

What Shopify Already Does for You (Automatically)

The most important sentence first: you do not need to upload WebP or AVIF files. Shopify’s CDN reads the browser’s Accept header, works out which formats it supports, and serves the smallest suitable one automatically. WebP since 2020, AVIF since 2022. This applies to every image that runs through the image_url or image_tag filter, meaning product images, theme assets and rich-text-editor images.

That leads straight to the first myth to clear away: an app that bulk-converts your library to WebP does work the CDN already does for free, which is why bulk Shopify image optimisation apps mostly just add JavaScript that slows the page back down. How app bloat builds up is covered in our piece on Shopify apps and site speed. For format conversion, you need none.

WebP vs AVIF in 2026: The Short Version

Both are modern formats, both beat JPEG comfortably. The difference is academic for most stores, because Shopify makes the choice. For context, the facts anyway:

AVIF compresses photos roughly 30% harder than WebP, but encodes more slowly and has slightly less browser support. In practice, WebP is today’s reliable default, and the format you’ll see most often in your Network tab.

Why You Usually Shouldn’t Force the Format

This is where many guides fall down against reality. According to the official Shopify documentation, the format parameter of image_url only accepts the values jpg and pjpg. Shopify chooses WebP and AVIF automatically based on the browser. So a format: 'webp' in the filter is not a reliable lever. Rely on the automatic negotiation instead of hard-coding a format the CDN already picks best on its own.

What Actually Needs Optimising

If Shopify handles format and delivery, where do you actually lose load time? In five places that belong to you and that no automatic conversion solves. The real Shopify image optimisation work starts here, and the sections below take each one in turn.

1. Serve Every Image Through the Liquid Pipeline

This is the foundation of all Shopify image optimisation. Automatic format conversion only fires for images that run through image_url or image_tag, and therefore through cdn.shopify.com. These cases bypass the CDN and get no WebP:

• hardcoded <img> tags with a full URL instead of a Liquid filter,
• background images in CSS,
• images from external CDNs or from apps,
• raw code from old page builders.

Here is how to find them: open DevTools, the Network tab, filter by “Img” and reload. Any response that comes back as jpg or png on a modern browser instead of webp is bypassing the pipeline. Those exact images trigger the “Serve images in next-gen formats” warning in PageSpeed Insights, even when the rest of your store already serves WebP.

2. Right-Size With Dimensions and srcset

Format saves percentages; the right size saves multiples. An 1800px image displayed at 400px wide on a phone wastes most of its bytes. Two rules fix that.

First, always pass image_url a width. Without width, the filter ships the source dimension and skips optimisation. Second, for <img> elements use the image_tag filter, which builds a complete srcset automatically so every device gets the right size.

{{ product.featured_image | image_tag:
   widths: '400, 800, 1200, 1600',
   sizes: '(min-width: 750px) 50vw, 100vw',
   loading: 'lazy',
   alt: product.featured_image.alt }}

The filter outputs a finished <img> with a srcset, and the CDN still picks the format itself. The check in the Network tab: sort by size descending. A 500 KB image rendered at 200×200 is the sure sign of a missing or wrong width.

3. Compress the Source Before Upload

The most overlooked part of Shopify image optimisation is the source: Shopify does not compress your uploaded file. Upload a 5 MB image and it is stored as a 5 MB original, with every derivative calculated from it. In audits, an average hero image often weighs over 2 MB purely because nobody treated the source first. Your rules before upload:

• Scale photos to about 2048px on the long edge at most, no store needs larger.
• Export as JPEG at 80 to 85 percent quality, the sweet spot between size and appearance.
• Use PNG only for logos and icons with transparency, never for product photos, where PNG is many times larger.
• Use SVG for simple logos, which scales without loss.

4. Get the Hero and LCP Image Right

The largest visible image is almost always your Largest Contentful Paint element and deserves special treatment. It must not lazy-load; it belongs on loading="eager" with fetchpriority="high" so the browser prioritises it immediately.

<img
  src="{{ section.settings.hero | image_url: width: 1600 }}"
  width="1600" height="900"
  loading="eager"
  fetchpriority="high"
  alt="...">

Because it is a topic in its own right, we’ve put the full walkthrough in the Shopify LCP fix guide. For image optimisation, just remember: exactly one image per page gets this preferential treatment, and every other image loads lazily.

5. Tame Collection Pages

Collection pages are the single biggest line item in image weight. A collection of 48 products loading every image at once can pull several megabytes in one go. Three moves:

• Lazy-load below the fold. Only the first visible row eager, the rest lazy.
• Always set width and height. That reserves the space and prevents layout shift, so CLS as well.
• Limit the initial count. Load fewer products first and fetch more on scroll, rather than serving 48 images at once.

Audit Your Images in 10 Minutes

You don’t need a tool subscription, just Chrome and PageSpeed Insights.

1. Open DevTools, the Network tab, filter by “Img”, reload the page.
2. Check whether the responses are webp or avif. If jpeg or png appears on a modern browser, that image is bypassing the pipeline.
3. Sort by size descending and compare with the rendered size. A large file at a small display size means a missing srcset.
4. Run the page through PageSpeed Insights and read “Serve images in next-gen formats” and “Properly size images”. They point to the exact outliers.

For context on why it pays off: according to the 2025 Web Almanac, images make up a large share of total page weight. On image-heavy stores they are the single biggest lever for load time, bigger than the theme or the apps, which makes image priority the highest-leverage part of Shopify image optimisation.

Common Shopify Image Optimisation Mistakes

Even good Shopify image optimisation stalls if you fall into one of these traps.

1. Uploading WebP files directly and destroying the JPEG fallback.
2. Installing a bulk-conversion app that duplicates what the CDN does for free, adding JavaScript in the process.
3. Lazy-loading the hero image and worsening LCP.
4. Using PNG for product photos when JPEG would be a fraction of the size.
5. Leaving out width and height and causing layout shift.
6. Embedding images outside the Liquid pipeline and wondering why they get no WebP.

Do You Need a Shopify Image Optimisation App?

For format conversion, clearly no; the CDN handles it. An app can have a narrow benefit if you can’t touch code and need automatic lazy-loading or responsive sizes. But weigh the cost: every app brings its own JavaScript, and that can eat the image saving right back up. The lighter route is almost always the native build in the theme, with image_tag, clean lazy-loading and a properly handled hero image. Good Shopify image optimisation comes from the right moves at the source, not from another extension.

Conclusion: Optimise What You Own

You can safely leave the format question to Shopify. The CDN serves WebP and AVIF automatically as soon as the browser supports them, and a bulk app changes nothing meaningful about that. What counts are the things no automation solves for you: serving images through the Liquid pipeline, sizing them correctly, compressing the source before upload, prioritising the hero image and taming collection pages. Get those five right and you pull the most out of every image, without converting a single file by hand. That is Shopify image optimisation that lasts.