Image optimization on Shopify in 2026: the real playbook

AVIF, responsive srcset, lazy loading, CDN headers — what actually moves Lighthouse scores.

Shopify’s image CDN is good enough out of the box. The wins come from how you use it.

Use AVIF, then WebP, then JPEG

Shopify negotiates format on the URL. Use the image_url filter with format: "avif" for new builds. Where AVIF isn’t supported, fall back to WebP. JPEG only as the final fallback.

Responsive srcset, not single src

Always emit srcset with breakpoint widths matching your layout. Browsers pick the smallest workable image. Most themes don’t do this and serve 2400px hero images on mobile.

Preload the LCP image

Add <link rel="preload" as="image" fetchpriority="high"> for the hero. Set loading="eager" on the corresponding <img>. Lazy-load everything else.

Half of Shopify performance work is image work.

Color-matched placeholders

Use a 1px sampled color (not blur-up) as the background of the image container. Avoids visible flash, costs zero bytes.