magento2-page-builder
magento2-page-builder copied to clipboard
[Content Type Image] Both desktop and mobile images are loaded
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.
@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.
Hi @jasperzeinstra. We need to postpone this issue cause we need to wait till https://github.com/magento/adobe-stock-integration/issues/894 will be done in the Magento core. After that, we will be glad to work with you on this. Thanks for your contribution.
@omiroshnichenko https://github.com/magento/adobe-stock-integration/issues/894 is out of ASI scope now
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.