image_
{{ product | image_url: width: 200 | image_tag }}Output
Rendered output
Lazy loading
If you don't apply the preload attribute to , then loading is automatically set to lazy for images in sections further down the page.
You shouldn't lazy load images above the fold. If the default value doesn't work for your theme, then consider writing your own logic using the section.index and section.location properties. For more information, refer to the section object.
image_tag and focal points
image_tag and focal pointsThis filter automatically applies a focal point to the image using the object-position CSS style, if focal point coordinates are available. You can also access an image's focal point coordinates directly through the object. Learn how to set a focal point.
{{ images['potions-header.png'] | image_url: width: 300 | image_tag }}Output
Rendered output
width
Specify the width attribute of the <img> tag. You can set the parameter to nil to prevent the attribute from being added.
<!-- With a width -->
{{ product | image_url: width: 400 | image_tag: width: 300 }}
<!-- With the width set to nil -->
{{ product | image_url: width: 400 | image_tag: width: nil }}Output
Rendered output
height
Specify the height attribute of the <img> tag. You can set the parameter to nil to prevent the attribute from being added.
<!-- With a height -->
{{ product | image_url: width: 400 | image_tag: height: 300 }}
<!-- With the height set to nil -->
{{ product | image_url: width: 400 | image_tag: height: nil }}Output
Rendered output
sizes
Specify source sizes with the HTML sizes attribute.
{{ product | image_url: width: 200 | image_tag: sizes: '(min-width:1600px) 960px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)' }}Output
Rendered output
widths
By default, Shopify generates a srcset with a smart set of default widths up to the maximum defined in the image URL. However, you can create your own set of widths.
{{ product | image_url: width: 600 | image_tag: widths: '200, 300, 400' }}Output
Rendered output
srcset
By default, Shopify generates a srcset. However, you can create your own srcset.
The srcset parameter takes precedence over the width parameter.
You shouldn't to use the srcset parameter unless you want to remove the attribute by setting the parameter to nil.
{{ product | image_url: width: 200 | image_tag: srcset: nil }}Output
Rendered output
preload
Specify whether the image should be preloaded.
When preload is set to true, a resource hint is sent as a Link HTTP header
with a rel value of preload.
The Link header also includes imagesrcset and imagesizes that match the srcset and sizes attribute of the tag,
where present:
This option doesn't affect the HTML img tag directly.
You should use the preload parameter sparingly. For example, consider preloading only above-the-fold images. To learn more about resource hints in Shopify themes, refer to Performance best practices for Shopify themes.
By default, the alt attribute of the <img> tag is set to the media alt text, or the resource title for article, collection, line item, product, and variant images. However, you can override this default, or set the value if there's no default.
{{ product | image_url: width: 200 | image_tag: alt: "My image's alt text" }}Output
Rendered output
HTML attributes
You can specify HTML attributes by adding a parameter that matches the attribute name, and the desired value.
{{ product | image_url: width: 200 | image_tag: class: 'custom-class', loading: 'lazy' }}