How to Serve Next-Gen WebP & AVIF Images on Shopify Themes
Pass Google's 'Serve images in next-gen formats' audit on Shopify. Reduce image file sizes by 40-70% with automatic WebP/AVIF formatting.
Target Asset / Metric
Shopify CDN (cdn.shopify.com)
Average Uncompressed Payload
Saves 1.5 MB - 4.0 MB per page
Main Thread Latency Penalty
Cuts bandwidth transfer time by 50%
1. The Technical Problem
Heavy JPEG and PNG product images eat up mobile bandwidth, increasing data costs and causing high bounce rates on cellular connections.
Merchants upload 5MB camera exports directly to Shopify without resizing or specifying modern formats in theme liquid filters.
2. Engineering Resolution Strategy
1. Utilize Shopify's modern `image_url` filter with explicit `format: 'pjpg'` or let Shopify CDN auto-negotiate WebP. 2. Generate multi-resolution `srcset` values for mobile, tablet, and desktop viewports.
<!-- Responsive WebP Image Markup in Liquid -->
<img
src="{{ product.featured_image | image_url: width: 800 }}"
srcset="
{{ product.featured_image | image_url: width: 375 }} 375w,
{{ product.featured_image | image_url: width: 550 }} 550w,
{{ product.featured_image | image_url: width: 750 }} 750w,
{{ product.featured_image | image_url: width: 1100 }} 1100w
"
sizes="(max-width: 768px) 100vw, 50vw"
width="{{ product.featured_image.width }}"
height="{{ product.featured_image.height }}"
alt="{{ product.title | escape }}"
loading="lazy"
>💡 Pro-Tip: Always create a duplicate theme backup before editing theme.liquid or snippet files.
Frequently Asked Questions
Does Shopify automatically convert images to WebP?
Shopify CDN auto-converts to WebP if the browser supports it, provided your theme uses modern `image_url` filters instead of legacy `img_url`.
Why does Google PageSpeed still show 'Serve images in next-gen formats'?
Because the requested dimensions are often 2x-4x larger than the actual display container, downloading excess pixel data.