Article Featured Image with SRCSET - Shopify 2.0

template-article.liquid

{%- if article.image -%}
    <div class="article-template__hero-container" {{ block.shopify_attributes }}>
        <div class="article-template__hero-{{ block.settings.image_height }} media"
             itemprop="image"
                {% if block.settings.image_height == 'adapt' and article.image %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}
        >
            <img
                    srcset="{% if article.image.width >= 350 %}{{ article.image | img_url: '350x' }} 350w,{% endif %}
                            {% if article.image.width >= 750 %}{{ article.image | img_url: '750x' }} 750w,{% endif %}
                            {% if article.image.width >= 1100 %}{{ article.image | img_url: '1100x' }} 1100w,{% endif %}
                            {% if article.image.width >= 1500 %}{{ article.image | img_url: '1500x' }} 1500w,{% endif %}
                            {% if article.image.width >= 2200 %}{{ article.image | img_url: '2200x' }} 2200w,{% endif %}
                            {% if article.image.width >= 3000 %}{{ article.image | img_url: '3000x' }} 3000w,{% endif %}
                            {{ article.image | img_url: 'master' }} {{ article.image.width }}w"
                    sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
                    src="{{ article.image | img_url: '1100x' }}"
                    loading="lazy"
                    width="{{ article.image.width }}"
                    height="{{ article.image.height }}"
                    alt="{{ article.image.alt | escape }}">
        </div>
    </div>
{%- endif -%}