responsive-product-image.liquid

{% comment %}
Responsive product images with srcset.
{% endcomment %}

{% assign default_default_size = "medium" %}
{% assign default_sizes = "100vw" %}
{% assign default_image = product.featured_image %}

{% if default_size == nil %}{% assign default_size = default_default_size %}{% endif %}
{% if sizes == nil %}{% assign sizes = default_sizes %}{% endif %}
{% assign image = default_image %}

<img src="{{ image.src | product_img_url: default_size }}"
  srcset="
    {{ image.src | product_img_url: 'small' }}     100w,
    {{ image.src | product_img_url: 'compact' }}   160w,
    {{ image.src | product_img_url: 'medium' }}    240w,
    {{ image.src | product_img_url: 'large' }}     480w,
    {{ image.src | product_img_url: 'grande' }}    600w,
    {{ image.src | product_img_url: '1024x1024' }} 1024w"
  sizes="{{ sizes }}"
  alt="{{ image.alt | escape }}"
  data-js-responsive="true"
  {% if attributes != nil %}{{ attributes }}{% endif %}
/>