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