Responsive image data-srcset attribute not working

[gr5]

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