An example of how to use srcset in Shopify themes

srcset.liquid

{% for product in collection.products %}
<a href="{{ product.url | within: collection }}">
    {% assign image = product.featured_image %}
    <img src="{{ image.src | img_url: '480x' }}" alt="{{ image.alt | escape }}"
        srcset="
        {% if image.width > 640 %}{{ image.src | img_url: '640x' }} 640w{% endif %}
        {% if image.width > 720 %},{{ image.src | img_url: '720x' }} 720w{% endif %}
        {% if image.width > 900 %},{{ image.src | img_url: '900x' }} 900w{% endif %} 
        " 
        sizes="(min-width: 960px) 450px, (min-width: 720px) 50vw, 100vw"
    />
</a>
{% endfor %}

Hello from the future! Thanks for this – helped get me off the ground with the right Liquid tags/filters. Just a note that the srcset entries need to be separated by commas.

Hi @BigglesZX — Great to hear that you found this and found it useful :) Thanks for the note on the commas. I think they do get output if there's more than one src in the set (see line 7) but would need to check as it's been ages since I tried this in a theme.

@keirwhitaker Ah yes, right you are! I was retyping rather than copy-pasting and missed that :)

@BigglesZX 👍