Skip to main content

​
img_url

Generate optimized image URLs using predefined size shortcuts. 
{{ product.featured_image | img_url: 'large' }}

​
Available sizes

ShortcodeSize (px)
pico96
icon128
thumb160
small220
medium320
large480
grande600
display720
jumbo1024
master1440
desktop1920
ultra3000

​
Usage examples

<!-- Thumbnail -->
{{ product.featured_image | img_url: 'thumb' }}

<!-- Product card -->
{{ product.featured_image | img_url: 'large' }}

<!-- Full-width hero -->
{{ product.featured_image | img_url: 'desktop' }}

​
Responsive images

<img
  src="{{ product.featured_image | img_url: 'jumbo' }}"
  srcset="
    {{ product.featured_image | img_url: 'small' }} 220w,
    {{ product.featured_image | img_url: 'medium' }} 320w,
    {{ product.featured_image | img_url: 'large' }} 480w,
    {{ product.featured_image | img_url: 'jumbo' }} 1024w,
    {{ product.featured_image | img_url: 'master' }} 1440w
  "
  sizes="(max-width: 767px) 100vw, 50vw"
  alt="{{ product.title }}"
  loading="lazy"
>