Responsive image data-srcset attribute not working

Technical Q&A

Topic summary

A developer is troubleshooting responsive image implementation using Liquid templating. The issue: images always load at 720px width regardless of viewport size, despite proper srcset and sizes attributes being configured.

Current implementation:

  • Using product.images.first and product.images.last to display ~10 images per product
  • Images are within a carousel that slides horizontally
  • srcset defines 720w and 550w variants
  • sizes attribute set to (max-width: 720px) 100vw, 370px
  • Network tab confirms only 720px images load at all viewport widths

Attempted solutions:

  • Tried data-srcset with data-src (didn’t resolve)
  • Tested image_tag filter with similar results

Open questions:

  • Could the carousel implementation be interfering?
  • Is the method of selecting images (product.images.first/last) causing the problem?
  • Why isn’t the browser respecting the sizes attribute and loading appropriate image variants?
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I have created the following liquid for the display of responsive images. It is intended to display the 720 pixel image below our media query break point of 720 pixels. It is incorrectly displaying that size at all widths, as confirmed in the network tab of developer tools.

<img 
class="first-image" 
loading="lazy"
src="{{ product.images.first | img_url: '370x370', crop: 'center' }}"
srcset="{{ product.images.first | img_url: '720x720', crop: 'center' }} 720w, 
{{ product.images.first | img_url: '550x550', crop: 'center' }} 550w"
alt="{{ product.images.first.alt | escape }}"
sizes="(max-width: 720px) 100vw, 370px"
width="370" 
height="370"
/>

I am using

product.images.first

to display the image because within this section of the website we are required to echo out the first and last images from each product. I am echoing out about ten images on the page using this code. I am also using

product.images.last

to display the last image from each product elsewhere.

I’ve tried using data-srcset (with data-src), but that does not resolve the issue.

Is the problem caused by the method with which I’m grabbing the image?

The images are included in a carousel, where the images slide in and out of visibility from right to left. Could that be causing the issue?

Alternatively, I’ve also tried using the image_tag filter, as below, to similar results.

{{ product.images.first | image_url: width: 370 | image_tag: width: 370, height: 370, widths: '370, 550, 720', sizes: '(max-width: 720px) 100vw, 370px' }}