[Content Type Image] Both desktop and mobile images are loaded

[jasperzeinstra]

When using Content Type Image and using a mobile and desktop image both images are loaded by the browser. It should only load the image you see. The template is now using two img-tags. But it would be better to use the picture-tag.

Current situation
vendor/magento/module-page-builder/view/adminhtml/web/template/content-type/image/full-width/master.html

<figure>
  <a>
    <img src="…" class="pagebuilder-mobile-hidden" />
    <img src="…" class="pagebuilder-mobile-only" />
  </a>
  <figcaption>…</figcaption>
</figure>

Preferred situation

<figure>
  <a>
    <picture>
      <source media="(min-width: 678px)" srcset="…">
      <source media="(max-width: 677px)" srcset="…">
      <img src="…" />
    </picture>
  </a>
  <figcaption>…</figcaption>
</figure>

I haven't figured out how page builder works exactly so haven't got a PR ready for this. But does everybody agree that this is a better implementation? Otherwise you're loading desktop images on a mobile device. That's taking up to much resources.

[davemacaulay]

@jasperzeinstra we originally opted for the solution you see today due to requirements of this functionality working on IE 11. However, I believe it's suitable for the responsive images to not show when viewing the site on IE 11 as it's not a mobile browser.

We'll create a backlog item to have this addressed in a future version.

[omiroshnichenko]

Hi @jasperzeinstra. We need to postpone this issue cause we need to wait till magento/adobe-stock-integration#894 will be done in the Magento core. After that, we will be glad to work with you on this. Thanks for your contribution.

[sivaschenko]

@omiroshnichenko magento/adobe-stock-integration#894 is out of ASI scope now

[kamephis]

This is still an important issue. It would be the best to replace the <figure> with the <picture> or as <img> with srcset and configurable breakpoints.