The Picture helper in ImageProcessor.Web.Episerver now have an option to render the loading attribute that enables browser-native lazy loading. This makes it even simpler to optimize the loading of images.
If you are familiar with the Picture helper you might already know that there are options for rendering the picture element that supports lazy loading. Two new lazy loading types have been added in version 5.6 of ImageProcessor.Web.Episerver (“Native” and “Hybrid”).
In addition to adding the new lazy loading types, the old lazy loading types have been renamed to be more intuitive (but using the old names still works).
if you are using the Picture helper all you need to do is to set the lazy load type to “Native” to have your images lazy loaded!
Native adds the loading=”lazy” attribute to the img-element which let the browser decide the most optimal time to load the image.
However, there are
When using native lazy loading you might see a warning in your browser:
[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance.
You have most likely not done anything wrong, there seems to be a bug in Chromium.
3 thoughts on “Episerver Picture helper now have option for native lazy loading.”
Great work again Erik! It was my pleasure to add this to the plugin.
Thanks Vincent. The pleasure is mine 🙂
Nicely done Erik. Thank you for sharing