How to use Picture tag in Shopify

1. Picture tag : What about the < Picture > ?

The most common use of the element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
For example:
Before:-
< img src=”image-text-small.png” alt=”Image text” >
After:-
< picture
< source
srcset=”image-text-small.png 320w,
image-text-medium.png 800w,
Image-text-large.png 1200w”
sizes=”( min-width: 60rem ) 80vw,
( min-width: 40rem ) 90vw, 100vm” >
< img src=”image-text-small.png” alt=”Image text” >
Example:
For shopify
< picture class=”Dummy” >
< source media=”( max-width: 375px )”
srcset=”{{ collection | img_url: ‘375x’ }},
{{ collection | img_url: ‘375x’, scale: 2 }} 2x”>
< source media=”( max-width: 768px )”
srcset=”{{ collection | img_url: ‘768x’ }},
{{ collection | img_url: ‘768x’, scale: 2 }} 2x”>
< img src=”{{ collection | img_url: ‘1200x’ }}”
srcset=”{{ collection | img_url: ‘1200x’ }},
{{ collection | img_url: ‘1200x’, scale: 2 }} 2x”
alt=”…” loading=”lazy” >
< /picture >