Skip to content

Speed

WebP, AVIF, and Shopify's image pipeline

Published

The Shopify image pipeline in 2026

Shopify's image CDN picks the output format per request. Shopify says it 'automatically detects which image formats are supported by the client (e.g. WebP, AVIF, etc.) and selects a file format for optimal quality and file size.' In practice most buyers get WebP. In our tests on 16 September 2026, Chrome, Firefox and Safari 18 received WebP at every width we tried from 400px up; AVIF came back only at 300px, and only for some images. Files uploaded as .webp went to Safari 17 and older as JPEG at every width we tried. The saving is still real: one 1000px product image weighed 65KB as WebP against 114KB as JPEG.

Format negotiation happens at Shopify's CDN5, so even a hard-coded cdn.shopify.com URL in a raw <img src=...> tag gets it: the same product image with no width parameter still came back as WebP to Chrome. What a raw URL skips is resizing. Without {{ product.image | image_url: width: 800 }} or a width parameter, that image arrived at full size, 269KB of WebP instead of 65KB at 1000px. That is the silent reason 'why is my Shopify store slow' audits keep finding: the theme isn't asking the pipeline for the size it displays. The Shopify image sizes reference lists the widths Dawn and Horizon request, so you can match the source to them. Images hosted off Shopify get neither the format nor the resizing.

The image_url Liquid filter

image_url is the modern Shopify filter that emits responsive, format-negotiated image URLs. It accepts width (and optional height, crop, format) and returns a CDN URL that Shopify resolves per request. The browser sends its Accept header and Shopify returns whichever supported format it judges best for quality and size, which in our tests was usually WebP. img_url is the older equivalent — still supported, but image_url is preferred on Online Store 2.0 themes. Hydrogen storefronts don't use Liquid filters; they use Hydrogen's Image component.

liquid image_url usage in product card snippets 
<!-- Single-width usage -->
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  width="800" height="800"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy"
/>

The filter's CDN URL gets the automatic format choice. There is no format: 'webp' or format: 'avif' to add: the format parameter accepts only jpg and pjpg5. Leave it out unless you have a specific reason.

The srcset pattern that doesn't double-load

A responsive srcset lets the browser pick the right image width for the device. The Shopify-correct pattern: declare 3-4 widths in srcset, set sizes to the displayed width, and let the browser choose. The trap: declaring widths that don't match the displayed size (10 widths from 200px to 4000px on an image that displays at 400px) wastes Shopify's pipeline work without benefit. Pick widths that cover real device sizes.

liquid Responsive image with srcset on a product card 
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="{{ product.featured_image | image_url: width: 400 }} 400w,
          {{ product.featured_image | image_url: width: 600 }} 600w,
          {{ product.featured_image | image_url: width: 800 }} 800w,
          {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 768px) 50vw, 25vw"
  width="800" height="800"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy"
/>

Four widths cover most card layouts. The sizes attribute tells the browser the displayed width — 50vw on mobile (one card per row at half viewport), 25vw on desktop (four cards per row). The browser picks the width from srcset that best matches the displayed size at the device's DPR.

When to override the auto-format

You can't force WebP or AVIF. The format parameter accepts only jpg and pjpg, and even then Shopify only takes that format's features into account 'when making the final automatic format selection.' Three cases where you might still intervene. (1) Progressive loading — format: 'pjpg' asks for progressive JPEG for clients that end up with JPEG. (2) Animated GIFs that the pipeline doesn't optimise — host externally or convert to MP4 + video tag. (3) WebP masters — files uploaded as .webp reach Safari 17 and older as JPEG at every width, while JPEG uploads reach them as WebP or AVIF, so upload JPEG or PNG masters and let Shopify convert. The default behaviour is right for almost every store.

Shopify's Optimizing for AI doc4 recommends "high-quality images with descriptive alt text" — image quality matters for AI shopping engines that surface visual product cards. Don't compress so aggressively that visual quality degrades to save 30KB. The pipeline's defaults balance quality and size; trust them unless you have a measured reason to override.

Upload rules — file name and source size

Three rules at upload time. (1) Set the file name BEFORE uploading — Shopify's Optimizing site structure doc confirms file names cannot be modified after upload. (2) Resize the source to the maximum displayed width × 2 — for a hero image that displays at 1600px, upload at 1600-3200px max, not 4000-6000px. (3) Use descriptive alt text in the media library after upload.

Shopify's optimize-site doc2 is explicit: image file names cannot be modified post-upload. A file uploaded as IMG_4271.jpeg stays IMG_4271.jpeg forever unless you delete and re-upload with the new name. Google reads the file name as a secondary content signal — ceramide-moisturizer-50ml-jar.jpg beats IMG_4271.jpeg on otherwise-identical images.

Alt text rule: describe what the image shows, not what query you want to rank for. Shopify's SEO overview1 confirms alt text is customizable per image via the media library. Use natural language; never keyword-stuff alt attributes. AI shopping engines flag keyword-stuffed alt text as low-trust.

Keep reading