Image lazy load options

[mircotripoczky]

This is more of a feature request and not should be so hard to implement I think in a future update.

Since more and more browser support the "loading=“lazy” (or “auto” or “eager”) as img tag attribute it would be nice to have this option within the editor. Is there a plan to do so?

Like this maybe?

Because this also works for iframes, maybe add that option to the “Content” and “Raw Content” elements as well?

best regards
Mirco

[prakash_s]

Hello @mircotripoczky

Thanks for writing to us

Sorry, there is no known plan at the moment, but I’ll forward this as a feature request.

Thanks

[mircotripoczky]

Thanks.

Would be nice to have. It would give a huge boost to page performance by just adding a simple attribute to the img-tag e.g. <img src=“xyz.jpg” alt=“xyz” loading=“lazy”>… ok it would also required to add a height and width to avoid jumping content after an image is loaded.

best regards and I’m looking forward for future updates and features. You guys did a great job so far
Mirco

[mircotripoczky]

PS: I tried to add that attribute using “Custom attributes” at the “Customize” tab of the image element, but that just adds that attribute to the surrounding of the image, but not to the img tag itself… is that as intended?

best regards
Mirco

[nabeel]

Hey Mirco,

The custom attributes are added to the wrapper HTML tag of the element, in case of the Image element the wrapper HTML tag is <span> (see https://theme.co/docs/image#customize)

You probably can achieve the lazy loading feature with third party plugins but regretfully we cannot recommend any third party plugin but you can try asking in the peer forum.

Hope this helps!