Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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' }}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025