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 many some browsers that don’t support native lazy loading, and for those you might want to still use javascript. When using lazy load type “Hybrid” you can have native lazy loading in the browsers that support that, and fallback to custom javascript lazy loading for browsers that don’t.
Here is some sample javascript that use native lazy loading if supported, and custom lazy loading if not.

If you already have setup lazy loading with javascript I still recommend to use native lazy loading for browsers that support it. Because I think (and I really hope😃) that the browser developers can make a better experience than me and you can do in javascript. It seems for example that Chrome loads images further down on the page if you scroll fast, compared to if you scroll slowly.

Note
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.