img_tag widths are not working correctly

[stijns96]

Hi there,

Expected web.dev

<img
  alt="An image"
  width="500"
  height="500"
  src="image.jpg?crop=center&v=1700744891&width=500"
  srcset="image.jpg?crop=center&v=1700744891&width=500 500w, image.jpg?crop=center&v=1700744891&width=1000 1000w, image.jpg?crop=center&v=1700744891&width=1500 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
/>

Current output

<img
  alt="An image"
  width="500"
  height="500"
  src="image.jpg?crop=center&v=1700744891&width=500"
  srcset="image.jpg?crop=center&v=1700744891&width=500 500w"
  sizes="(min-width: 768px) 500px, 100vw"
/>

Explanation When using the following code with an image_url width of 500, the srcset will not output higher than the width that is set on the image itself. This is not really usefull for 2 and 3 DPR support. I actually like to see that the srcset has nothing to do with the width that is set on the image_url.

{{
  block.settings.image
  | image_url: width: 500
  | image_tag:
    alt: 'An image',
    sizes: '(min-width: 768px) 500px, 100vw',
    widths: '500, 1000, 1500'
}}

Workaround Set the default src (with image_url) on either 2 or 3 DPR (depends on what you'd like to support) and add the default width to the image_tag.

{{
  block.settings.image
  | image_url: width: 1500
  | image_tag:
    alt: 'An image',
    sizes: '(min-width: 768px) 500px, 100vw',
    width: 500,
    widths: '500, 1000, 1500'
}}

[ggmichaelgo]

Hello @stijns96 !

The img_tag is not a filter from the Liquid gem; it is a custom Liquid filter from Shopify. There are many other filters that are only available through Shopify Themes. (Shopify Liquid Doc / image_tag doc)

For Shopify Theme development issues, it is best to reach out to the Shopify support team. The Liquid repo's Github Issue shouldn't be used for Shopify theme development supports since it is dedicated to the core functionality and development of the Liquid gem itself.

Issues and queries related to Shopify theme development-specific filters, tags, and objects are outside the scope of this repository.

Please direct your questions or concerns to the Shopify Support Center or the Shopify Community Forums for more targeted assistance

Thank you for your understanding and cooperation.