Liquid bug when using image_tag with crop

[eloyesp]

Just wanted to warn about a bug when using image_tag with cropped images, that is for images where you set both `height` AND `width`, the main issue is that the bug is not always visible.

To reproduce the image, the code to use is:

{{ product | image_url: width: 400, height: 200 | image_tag }}

This will generate the following `html` (you can test it on the interactive documentation).

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

The problem is that the scaled images that are added to the srcset are cropped with a different aspect ratio, so they are not only scaled but broken. The aspect ratio of the big image is: 2:1, while the broken image is 352:200, and that image will come only to some users and some images, so it is quite difficult to catch.

I've been trying to report to shopify, but it seems to be quite hard.

Regards.

[eloyesp]

It seems that it is a known bug already reported ‎02-02-2022, and also reported on 07-21-2022, none of them have responses from shopify (only more people that found the same bug).

It seems that the best workaround is building the tag and srcset by hand on liquid.