Automatic lazy loading above the fold, conflicts with `<picture>` HTML tag

[madsenmm]

Since the updated of default lazy loading for Liquid image_tag

This conflicts in cases when using preload: true, and rendering images inside a <picture> tag. If the <picture> element is above the fold, uses preload: true, Shopify forces the <img> element to be loaded, even though if it's viewed on mobile, and should use the <source> value from the <picture> element.

Visual presentation If the below are viewed on a screensize below the 600px threshold, the img rendered would still be force loaded, but would still want to use the preload feature on desktop.

<!-- First section (index 0) on the page -->
<section>
  <picture>
     <source srcset="..." media="(min-width: 600px)">
     {{- section.settings.image | image_url: width: 300 | image_tag: preload: true -}}
  </picture>
</section>