Picture element for images in Shopify

picture.liquid

{% assign image = image %}
<picture>
  <source srcset="{{ image | img_url: '335x', format: 'pjpg'}}, {{ image | img_url: '670x', format: 'pjpg' }} 2x"
        media="(max-width: 375px)">
  <source srcset="{{ image | img_url: '750x', format: 'pjpg'}}, {{ image | img_url: '1500x', format: 'pjpg' }} 2x"
          media="(max-width: 749px)">
  <source srcset="{{ image | img_url: '1500x', format: 'pjpg' }}"
          media="(min-width: 750px)">
  <img src="{{ image | img_url: '1500x', format: 'pjpg' }}" alt=""
       srcset="{{ image | img_url: '1500x', format: 'pjpg' }}">
</picture>

• Remove format: 'pjpg' where not appropriate, particularly if using transparent PNGs
• Add as many sources as required by the project, try to be as close as possible to the final rendered size for your various breakpoints as you can get