Shopify Image Optimization Guide

The Old Way is Dead

Historically, Shopify developers used the img_url filter. This filter is now officially deprecated by Shopify. Do not use it.

Use image_url Instead

The modern standard is image_url. It supports WebP compression automatically and handles aspect ratios much better.

<!-- BAD (Deprecated) -->
<img src="{{ product.featured_image | img_url: '800x' }}">

<!-- GOOD -->
<img src="{{ product.featured_image | image_url: width: 800 }}">

Use image_tag for Automatic SRCSETs

If you want Shopify to handle all responsive srcset attributes automatically, use the image_tag filter. It generates a complete HTML <img> tag for you.

{{ product.featured_image | image_url: width: 1200 | image_tag: 
  loading: 'lazy', 
  sizes: '(min-width: 1200px) 1200px, 100vw', 
  class: 'product-img' 
}}

Lazy Loading Best Practices

Add loading: 'lazy' via image_tag for below-the-fold images. Do not lazy-load your hero LCP image—use loading: 'eager' there instead.

Alt Text Matters

Always pass accessible alt text: alt: product.featured_image.alt | escape. Empty alts hurt SEO and accessibility audits.

See also: Theme Performance Tips and the Cheat Sheet responsive image examples.