Image optimization is one of the important steps you need to take to speed up Magento 2 and provide a better experience to your customers. There are multiple ways you can optimize images in Magento, the main being lazy loading.
It allows you to delay the loading of offscreen images which boosts page speed correspondingly. However, in case you don't want to lazy load some images to be lazy loaded (those at the top of the page), you can do this with the Magento 2 Lazy Load Extension.
Post Contents [hide]
How to Exclude Images from Lazy Load Automatically?
Navigate to Stores > Configuration > Magefan Extensions > Lazy Load. If you choose to lazy load ALL blocks, define the Lazy Load Block and set First Images To Skip from these blocks in a corresponding field.
The extension will automatically exclude entire blocks or only some of the first images in these blocks from lazy loading.
How to Exclude Images from Lazy Load Manually?
If you want to exclude any particular images from lazy loading, simply add the mfdislazy="1" attribute to the <img> tag as in the example.
Example:
<img src="image.jpg" /> —> <img mfdislazy="1" src="image.jpg" />
Note: it is very important that the mfdislazy attribute is added at the beginning of image tag, not at the end.
Once you add these attributes to the image within a specific block, it will be ignored.
However, if you want to exclude entire blocks from lazy loading, just don't add them to the Lazy Load Blocks field in the lazy load configuration.