Image Filters

Shopify CDN Image Transforms

Never output raw product.image URLs at full resolution. Shopify's CDN serves images from cdn.shopify.com with on-the-fly resizing. image_url generates optimized URLs; image_tag builds a complete <img> element.

{{ product.featured_image | image_url: width: 800 }}

{{ product.featured_image | image_url: width: 400, height: 400, crop: 'center' | image_tag:
  loading: 'lazy',
  alt: product.title,
  widths: '200, 400, 600',
  sizes: '(max-width: 768px) 50vw, 25vw'
}}

1. width: 800 — requests an 800px-wide version from the CDN
2. crop: 'center' — square crop from the image center
3. loading: 'lazy' — defers off-screen image loading (Core Web Vitals)
4. widths + sizes — generates srcset for responsive delivery

• crop options: center, top, bottom, left, right
• format: pjpg, webp — control output format
• Always set width AND height attributes to prevent layout shift (CLS)