How to use Picture tag in Shopify

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.

< img src=”image-text-small.png” alt=”Image text” >

< 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” >

< 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 >