img_url
Generate optimized image URLs using predefined size shortcuts.{{ product.featured_image | img_url: 'large' }}
Available sizes
| Shortcode | Size (px) |
|---|---|
pico | 96 |
icon | 128 |
thumb | 160 |
small | 220 |
medium | 320 |
large | 480 |
grande | 600 |
display | 720 |
jumbo | 1024 |
master | 1440 |
desktop | 1920 |
ultra | 3000 |
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"
>