Magento 2 Lazy Load extension has a built-in feature that allows you to prioritize the preloading of the most important images on your website pages. You can manually assign the highest preload priority to a specific image by adding an image attribute recognized by the extension. Also, any size restrictions set will be ignored.
You may need to add this attribute when creating complicated HTML markups so that the extension’s auto-preload feature doesn’t select the wrong images.
Setting the Highest Image Preload Priority
In order to preload a specific image with the highest priority, add a data-hero attribute in the following way:
<img data-hero src="banner.png" alt="Sale banner">If you want to preload images only on specific devices, add a data-media attribute with a media query:
<img data-hero data-media="(min-width: 768px)" src="banner.png" alt="Sale banner">
Was this article helpful?