Liquid filters: image

Output

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200 200w" width="200" height="133">

Rendered output

Anchor to Lazy loading

Lazy loading

If you don't apply the preload attribute to image_tag, 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.

Anchor to `image_tag` and focal points

`image_tag` and focal points

This 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 focal_point object. Learn how to set a focal point.

{{ images['potions-header.png'] | image_url: width: 300 | image_tag }}

Output

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/potions-header.png?v=1650325393&amp;width=300" alt="" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/potions-header.png?v=1650325393&amp;width=300 300w" width="300" height="173" style="object-position:1.9231% 9.7917%;">

Rendered output

Anchor to width

width

image_url | image_tag: width: number

Specify the width attribute of the <img> tag. You can set the parameter to nil to prevent the attribute from being added.

Output

Output

<!-- With a width -->
<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=400" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=300 300w, //polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=352 352w" width="300">

<!-- With the width set to nil -->
<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=400" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=352 352w">

Rendered output

Anchor to height

height

image_url | image_tag: height: number

Specify the height attribute of the <img> tag. You can set the parameter to nil to prevent the attribute from being added.

Output

Output

<!-- With a height -->
<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=400" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=352 352w" height="300">

<!-- With the height set to nil -->
<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=400" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=352 352w">

Rendered output

Anchor to sizes

sizes

image_url | image_tag: sizes: string

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

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200 200w" width="200" height="133" sizes="(min-width:1600px) 960px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)">

Rendered output

Anchor to widths

widths

image_url | image_tag: widths: string

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

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=600" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200 200w, //polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=300 300w, //polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=400 400w" width="600" height="400">

Rendered output

Anchor to srcset

srcset

image_url | image_tag: srcset: string

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.

Output

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200" alt="Health potion" width="200" height="133">

Rendered output

Anchor to preload

preload

image_url | image_tag: preload: boolean

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:

Link: <IMAGE_URL>; rel=preload; as=image

Link: <IMAGE_URL>; rel=preload; as=image; imagesrcset=ADDITIONAL_IMAGE_URL 352w; imagesizes=40vw

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.

Anchor to alt

alt

image_url | image_tag: alt: string

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

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200" alt="My image&#39;s alt text" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200 200w" width="200" height="133">

Rendered output

Anchor to HTML attributes

HTML attributes

image_url | image_tag: attribute: string

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' }}

Output

Output

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200 200w" width="200" height="133" loading="lazy" class="custom-class">

Code

Output

Output

Lazy loading

image_tag and focal points

Code

Output

Output

width

Code

Output

Output

height

Code

Output

Output

sizes

Code

Output

Output

widths

Code

Output

Output

srcset

Code

Output

Output

preload

alt

Code

Output

Output

HTML attributes

Code

Output

Output

`image_tag` and focal points