responsive images header shopify

```liquid
<header role="banner">
    {% if template.name == 'index' %}
      <h1 itemscope itemtype="http://schema.org/Organization">
    {% else %}
      <div class="h1" itemscope itemtype="http://schema.org/Organization">
    {% endif %}
        <a href="/" itemprop="url" class="site-logo{% if section.settings.logo != blank %} site-header__logo-image{% endif %}">
          {% if section.settings.logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
            {% capture mobile_image_size %}{{ section.settings.mobile_logo_max_width }}x{% endcapture %}
            <img src="{{ section.settings.logo | img_url: image_size }}"
                 srcset="
                 {{ section.settings.logo | img_url: image_size }} {{ section.settings.logo_max_width }}w,
                 {{ section.settings.logo | img_url: image_size, scale: 2 }} {{ section.settings.logo_max_width | times: 2}}w,
                 {{ section.settings.logo | img_url: mobile_image_size }} {{ section.settings.mobile_logo_max_width }}w,
                 {{ section.settings.logo | img_url: mobile_image_size, scale: 2 }} {{ section.settings.mobile_logo_max_width | times: 2}}w"
                 alt="{{ section.settings.logo.alt | default: shop.name }}"
                 sizes="(min-width: 750px) {{ section.settings.logo_max_width }}px, 150px"
                 itemprop="logo">
          {% else %}
            {{ shop.name }}
          {% endif %}
        </a>
    {% if template.name == 'index' %}
      </h1>
    {% else %}
      </div>
    {% endif %}

  </header>
  ```