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

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>

Start by reproducing the Liquid image_tag example with a picture element at widths below and above the 600px threshold, comparing preload behavior and source selection. Trace the default lazy-loading and preload handling for image_tag; done means the mobile source is used without forcing the img element while desktop retains preload behavior.