Responsive images: Set up different image sizes – https://www.shopify.com/partners/blog/using-responsive-images

responsive-images-set-up-different-image-sizes.html

<a href="{{ article.url }}" class="article__grid-image">
  <img id="{{ img_id }}"
    class="article__grid-image lazyload"
    src="{{ article.image | img_url: '300x300' }}"
    data-src="{{ img_url }}"
    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ article.image.aspect_ratio }}"
    data-sizes="auto"
    alt="{{ article.image.alt | escape }}">
</a>