Cropped images in srcset using image_tag

[alexr8]

I'm not sure if this is the right repo to post this bug so do let me know if it should be filed elsewhere.

If you specify a crop for an image with image_url and try and feed that into the image_tag, the generated srcset images always contain your original fixed height. For example:

{{
  media.preview_image
  | image_url: width: 416, height: 416
  | image_tag:
    loading: 'lazy',
    sizes: sizes,
    widths: '54, 74, 104, 162, 208, 324, 416',
    id: thumbnail_id,
    alt: media.alt
  | escape
}}

Each image that gets generated in the srcset will have height of 416 - so 54 x 416, 74 x 416, 104 x 416 and so on.

The images generated should take into account the aspect ratio - 54 x 54, 74 x 74 etc.

Also detailed here by another user: https://community.shopify.com/c/technical-q-a/image-tag-how-do-i-get-cropped-images-into-a-srcset/td-p/1472242.

[simonlayfield]

+1 for this. I expected the same, and ended up having to switch to an HTML img tag for fine tuning responsive image sizes.

[ceri-waterscreative]

+1

[jonXmack]

+1

[sebastianlenton]

Just ran into this too.

[Symediane]

+1

[rickydazla]

+1

[jbasoo]

As a workaround I'm generating my own srcset. It does come with the standard cropping caveat that if one of the requested image's dimensions is smaller than the defined dimension then it won't crop and will just try to resize. I'm using object-fit: cover; as a fallback.

{%- assign widths = '260, 280, 320, 360, 380, 420, 480, 560, 640, 720, 960, 1200, 1440, 1920' | split: ", " -%}

{%- capture image_srcset %}
  {% for width in widths %}
    {{-
      card_collection.featured_image
      | image_url:
        width: 720,
        height: 540,
        crop: 'center'
      | replace: 'width=', 'base_width='
      | replace: 'height=', 'base_height='
    -}}&width={{ width }}&height={{width | divided_by: 1.33333333 | round }} {{ width }}w{%- unless forloop.last -%},{%- endunless -%}
  {% endfor %}
{% endcapture -%}

{{
  card_collection.featured_image
    | image_url:
      width: 720,
      height: 540,
      crop: 'center'
    | image_tag:
      width: 720,
      height: 540,
      srcset: image_srcset
}}

[rickydazla]

I have been tracking this for a while and have had an open ticket with our MSM/Plus Support since August, to no avail. There are open forum questions that remain unaddressed by anyone at Shopify:

https://community.shopify.com/t/image-tag-how-do-i-get-cropped-images-into-a-srcset/96356
https://community.shopify.com/t/image-tag-does-not-work-with-height/136907
https://community.shopify.com/t/liquid-bug-when-using-image-tag-with-crop/216820

The earliest of those is from Feb 2022. Sigh

Interestingly, all the comments from the OPs where they gave an example of an image_tag and then said "This will render/generate..." now have blank code snippets. (They were absolutely not blank back when I checked in August.) Very odd 🤔

[jonXmack]

@rickydazla I've noticed the forum code snippets are now more often than not blank. Really useful 🙄

[charlespwd]

Hiya. I also found out about this a couple months back and the filter was indeed broken when height was set because that value was static throughout all the srcs.

It has been fixed sometime in the past year and I wasn't aware of this thread until just now.

If you still observe static height images with image_tag, let us know :)

[alexr8]

Amazing - I can confirm that this appears to be fixed from my testing too, thanks @charlespwd