Who Decides Whether Your Shopify Store Serves AVIF

On Shopify, the platform — not the merchant — chooses the delivery format. This guide separates what the CDN automates from the theme code you genuinely control.

Does Shopify serve AVIF automatically?

Yes — Shopify's image CDN auto-delivers AVIF to capable browsers, with no app, upload step, or theme change. The feature shipped to all stores on 29 August 2022 (Shopify changelog).

Every image served from cdn.shopify.com is inspected per request. Shopify reads the browser's Accept header and returns the smallest format that browser supports — AVIF, then WebP, then JPEG as the fallback. One stored asset, many delivered formats.

What the merchant cannot control

Format selection is not a setting you toggle. Three consequences follow:

You do not upload .avif files — upload JPEG or PNG masters and let the CDN derive formats.
You cannot force AVIF in Liquid; the image_url format parameter accepts only jpg and pjpg (image_url filter docs).
Shopify may serve WebP instead of AVIF when its own quality/size heuristic favours WebP for that specific image.

In short, delivery format is the platform's decision. Your job is the surrounding markup, not the codec.

How Shopify image URLs work

A Shopify image URL is built in Liquid with the image_url filter, then sized with the width parameter:

{{ product.featured_image | image_url: width: 800 }}

That returns a cdn.shopify.com URL ending in ?width=800. Request a smaller variant and the CDN generates plus caches it on first hit. The format you receive still depends on your browser — the URL itself is format-agnostic.

The older img_url filter is deprecated; use image_url and image_tag in current themes.

The theme code you actually control

What you control is the request: which dimensions, when to load, and which image gets priority. Use one <img> with srcset — no <picture> element is needed, because Shopify negotiates the format itself.

{% assign img = product.featured_image %}
<img
  src="{{ img | image_url: width: 800 }}"
  srcset="
    {{ img | image_url: width: 400 }} 400w,
    {{ img | image_url: width: 800 }} 800w,
    {{ img | image_url: width: 1200 }} 1200w,
    {{ img | image_url: width: 1600 }} 1600w
  "
  sizes="(max-width: 750px) 100vw, 800px"
  alt="{{ img.alt | escape }}"
  width="{{ img.width }}"
  height="{{ img.height }}"
  loading="lazy"
  decoding="async"
/>

Three rules carry most of the win:

Always set width and height — reserves space and prevents layout shift.
Match srcset widths to real display sizes — a 300px thumbnail never needs a 1600w source.
Lazy-load everything below the fold with loading="lazy".

Prioritise the LCP image

The featured product image is usually the Largest Contentful Paint element. Never lazy-load it; flag it as high priority instead. Many themes apply loading="lazy" to the whole gallery, including the first frame.

{% for media in product.media limit: 1 %}
  <img
    src="{{ media.preview_image | image_url: width: 1200 }}"
    srcset="{{ media.preview_image | image_url: width: 800 }} 800w,
            {{ media.preview_image | image_url: width: 1200 }} 1200w,
            {{ media.preview_image | image_url: width: 1600 }} 1600w"
    sizes="(max-width: 750px) 100vw, 800px"
    alt="{{ media.preview_image.alt | escape }}"
    width="{{ media.preview_image.width }}"
    height="{{ media.preview_image.height }}"
    fetchpriority="high"
    decoding="async"
  />
{% endfor %}

Preloading that one image from theme.liquid cuts LCP further. See Core Web Vitals & Images for the measurement framework, and AVIF Optimization for the format-level principles.

Where third-party apps help — and where they hurt

The default CDN already does the format work, so most "image optimisation" apps add little for assets on cdn.shopify.com. Apps earn their place when:

They inject images from external hosts that bypass Shopify's negotiation — a review app pulling user photos from its own CDN may serve JPEG to AVIF-capable browsers.
They add lazy-load or LCP logic your theme lacks.

Audit each app in DevTools. Any image not coming from cdn.shopify.com is one Shopify is not optimising for you.

Verify it yourself in 30 seconds

Trust the network panel, not the dashboard:

Open the storefront in Chrome, then DevTools → Network → filter Img.
Reload and click a product image request.
Check the response Content-Type — image/avif confirms AVIF delivery.

If you see image/jpeg in a modern browser, the asset is likely served from a third-party host, not cdn.shopify.com.

FAQ

Do I need a Shopify app to enable AVIF?

No. AVIF delivery is built into the Shopify CDN for every store and needs no app or configuration.

Should I upload AVIF files to Shopify?

No. Upload JPEG or PNG masters; the CDN derives AVIF and WebP variants automatically per request.

Can I force AVIF in Liquid?

No. The image_url format parameter only supports jpg and pjpg. AVIF is chosen by the CDN, not by theme code.

Why does one image show WebP instead of AVIF?

Shopify picks the format with the best quality-to-size result for that image, so it may prefer WebP over AVIF case by case.

Does AVIF on Shopify need a `<picture>` element?

No. Accept-header negotiation replaces format fallbacks; a single <img> with srcset is enough.

AVIF format overview — compression numbers and capabilities
AVIF vs WebP — how the two next-gen formats compare
AVIF Browser Support — the ~6% that still need a fallback
AVIF Optimization — quality and sizing fundamentals
Core Web Vitals & Images — measuring the speed impact
Convert masters yourself: JPG to AVIF, PNG to AVIF