IMAGE_TAG - how do I get cropped images into a srcset?

Technical Q&A

Topic summary

Issue Resolved: The image_tag filter was not correctly generating srcsets for cropped images.

Original Problem:

  • When using image_url with crop parameters (e.g., 350x350 square) followed by image_tag with widths/sizes attributes, the srcset URLs lacked the crop parameters
  • Heights in the srcset remained at 350px instead of scaling proportionally
  • Retina displays (2x dimensions) weren’t being accommodated in the generated srcset

Workaround Used:

  • Manually building srcsets instead of relying on image_tag
  • Using object-fit: cover with CSS, though this created aspect ratio issues where images might pull smaller sizes or stretch incorrectly

Resolution:
According to the final comment, this bug has been fixed by Shopify as of a couple months ago. The image_tag filter should now properly handle cropped images in srcsets.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

It doesn’t seem like the new image_tag generates srcsets completely correctly. And I’m trying to figure out if I’m missing something or it’s the tag.

I’ve got a slider for related collections - and it puts in square images. This is

{{ collection.image 
  | image_url: width: 350, height: 350, crop: 'center' 
  | image_tag: 
      widths: "200, 250, 300, 350", 
      sizes: "350px, (max-width:1400px) 300px, (max-width: 768px) 250px, (max-width: 480px) 200px" 
}}

On large screens, the blocks are 350px, and then on smaller screens, they’re smaller boxes.

The rendered output of this tag looks like this:

Which is wrong. The widths are correct on the items in the srcset, but the heights are all the same at 350px. According to the help doc, there’s only widths settings for the image_tag part, not heights.

In short, WTF?

I can do it the old way, but I’d rather use the new image tag.

Bonus question:

How do I get retina sizes to show up in there? On a large retina screens, the largest size should be loading a 700px square image (2x dimensions for retina), but this image tag doesn’t do that. Even though my originals are large enough, the srcset doesn’t load images larger than 350px square.

Note: This bit of code below works, but I want to do it with the image_url and image_tag.
4 Likes
2

I’m having this same issue! Did you ever find a solution?

3

Not really. Mostly, I’m just doing it the way I mentioned at the end of my original post.

You could do it with object-fit, which would look something like:


{{ collection.image | image_url | image_tag }}

But this has its own set of issues. You have to be careful of your aspect ratios, because the responsive code might pull a smaller image from the srcset due to the block’s width, and then the object-fit:cover can stretches it, because it’s not tall enough to fill the area.

So, I just do it by building out the srcset myself, then I know all the items are cropped correctly.

4

This has been fixed a couple months back. Just found out the thread just now