Shopify WebP & AVIF Images: Does Shopify Convert Automatically? (2026)

Optimize Shopify Image Loading in 60 Seconds

Run a free speed test on your store — if images are dragging down your score, you'll see warnings like "Properly size images" or "Serve images in next-gen formats" in the diagnostics. While Shopify handles format conversion, Thunder Page Speed Optimizer tackles the other half of image performance:

• Lazy loads offscreen images so they don't block initial page rendering
• Preloads your hero/LCP image for faster above-the-fold rendering
• Defers third-party app images and scripts that slow image loading
• Optimizes resource loading order so images appear faster

Format conversion + loading optimization = maximum image speed. Thunder handles the loading side with one click.

How Shopify's WebP & AVIF Auto-Conversion Works

When someone visits your Shopify store, their browser sends an HTTP request with an Accept header listing the image formats it supports. A modern Chrome browser sends something like: image/avif,image/webp,image/apng,image/*. Shopify's CDN reads this header and serves the best format available.

The priority order is: AVIF → WebP → original format. If the browser supports AVIF and the AVIF version is smaller than the WebP version for that specific image, Shopify serves AVIF. Otherwise, it falls back to WebP. If the browser supports neither (extremely rare in 2026), it serves the original JPEG or PNG.

This happens at the CDN level — no theme code changes needed. Shopify announced automatic AVIF support in August 2022, building on WebP support that's been available since 2020. The conversion is done server-side, so it works for any image served through Shopify's image pipeline.

What Gets Auto-Converted

• Product images — uploaded through Shopify admin
• Collection images — featured images on collection pages
• Theme assets — images in your theme's assets/ folder, served via asset_url
• Content images — uploaded through the rich text editor in pages/blog posts
• Section images — slideshow, hero banner, logo, and other theme section images

The key requirement: the image must be served through Shopify's CDN (URLs starting with cdn.shopify.com). Any image that goes through Shopify's image pipeline gets automatic format conversion.

When Shopify's Image Conversion Doesn't Work

Auto-conversion covers most images, but several common scenarios bypass Shopify's CDN entirely. If your speed test results still show "Serve images in next-gen formats," one of these is likely the cause:

WebP vs AVIF vs JPEG vs PNG: Shopify Image Format Comparison

Understanding the differences helps you make better decisions about source uploads and troubleshoot format issues. Here's how each format performs for typical Shopify product photography:

For most Shopify stores, you don't need to choose. Upload high-quality JPEG or PNG source files, and Shopify's CDN picks the optimal format per visitor. The real performance gains come from proper sizing (don't upload 4000px images for 400px displays) and optimizing how images load — lazy loading, preloading, and responsive srcsets.

How to Check if Your Shopify Store Serves WebP & AVIF

Want to verify your images are being converted? Here's a quick check using Chrome DevTools:

1. Open your store in Chrome and press F12 (or Cmd+Option+I on Mac) to open DevTools
2. Click the Network tab
3. Reload the page (Ctrl+R / Cmd+R)
4. Click the Img filter to show only images
5. Look at the Type column — you should see webp or avif instead of jpeg or png
6. Click any image and check the Response Headers — look for content-type: image/webp or content-type: image/avif

If you see jpeg or png for images on Shopify's CDN (cdn.shopify.com), something is preventing conversion. Check whether the image tag in your theme code uses Shopify's Liquid image filters.

For a broader performance picture beyond just image formats, our Shopify speed audit guide walks through the full diagnostic process.

Image Upload Best Practices for Shopify WebP & AVIF

Shopify's auto-conversion works best when you upload properly prepared source files. Here are the rules that ensure maximum quality at minimum file size:

Manual WebP Control with Shopify Liquid

While Shopify handles format conversion automatically for most cases, theme developers sometimes need manual control. Shopify's Liquid provides the image_url filter with a format parameter:

<!-- Force WebP format -->
{{ product.featured_image | image_url: width: 800, format: 'webp' }}

<!-- Let Shopify auto-negotiate (recommended) -->
{{ product.featured_image | image_url: width: 800 }}

<!-- Responsive with srcset (auto-format per browser) -->
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ product.featured_image.alt | escape }}"
  loading="lazy"
  width="800"
  height="800"
/>

In most cases, omitting the format parameter is better. This lets Shopify serve AVIF to browsers that support it (smaller than WebP) and WebP to the rest. Forcing format: 'webp' prevents AVIF delivery, which means larger files for Chrome and Firefox users who could receive AVIF.

For more on how image loading interacts with CSS and JavaScript optimization, see our LCP optimization guide — the hero image (often your largest image) is typically the LCP element and benefits most from format + loading optimization combined.

How WebP & AVIF Affect Shopify Core Web Vitals

Image format directly impacts two Core Web Vitals metrics that affect your SEO rankings:

For the complete picture on Core Web Vitals, our Shopify Core Web Vitals guide covers all three metrics and how they interact.

Frequently Asked Questions

Get Your Shopify Images Loading at Maximum Speed

Shopify's automatic WebP and AVIF conversion is a solid foundation — it handles format optimization for most images without any work on your part. The gaps (custom HTML, CSS backgrounds, app images) are fixable with proper Liquid usage and smart theme development.

But format is only half the image speed equation. How images load matters just as much as how they're encoded. Lazy loading, preloading the LCP image, and deferring render-blocking resources all contribute to faster image rendering. Thunder Page Speed Optimizer handles the loading side automatically.

Test your store's image performance now — and check the diagnostics for any remaining image optimization opportunities. For the full optimization playbook, see our complete Shopify speed optimization guide.