Responsive images best technique?

[JakobZabala]

I am not sure if this is the best practice for serving product images. Is there a more optimal way for shops without using a theme?

<a href="{{ product.url | within: collection }}">
  {% assign image0 = product.images[0] %}
      <div class="image-container">
       <img
      srcset="
    {% if image0.width > 450 %}{{ image0.src | img_url: '450x' }} 450w{% endif %}
    {% if image0.width > 720 %},{{ image0.src | img_url: '720x' }} 720w{% endif %}
    {% if image0.width > 900 %},{{ image0.src | img_url: '900x' }} 900w{% endif %}   "
         sizes="(min-width: 960px) 40vw, (min-width: 720px) 50vw, 100vw"
         src="{{ image0.src | img_url: '480x' }}" alt="{{ image.alt | escape }}" loading="lazy" width="1414" height="2000"  />
        </div>

        {% assign image1 = product.images[1] %}
        <div class="transition-img">
     <img
     srcset="
   {% if image1.width > 450 %}{{ image1.src | img_url:  '450x' }} 450w{% endif %}
  {% if image1.width > 720 %},{{ image1.src | img_url: '720x' }} 720w{% endif %}
  {% if image1.width > 900 %},{{ image1.src | img_url: '900x' }} 900w{% endif %}   "
    sizes="(min-width: 960px) 40vw, (min-width: 720px) 50vw, 100vw"
    src="{{ image1.src | img_url: '500x' }}" alt="{{ image.alt | escape }}" loading="lazy" width="1414" height="2000"  />
        </a>