Questions Lazy loading on images?

Lazy loading on images?

Wondering if anyone has figured out a way to introduce lazy loading for images? I know we can add loading="lazy" in the HTML, but I'd like a way to do it in Markdown, so I don't have to write out all the HTML for every image.

When my site was based on Jekyll, I could use Kramdown and add {: loading="lazy"} after the image to add the required flag. But nothing like that exists AFAIK with Blot.

Do any of you have any ideas please? I'd like to avoid introducing JS if at all possible.

Thanks!

10 months ago, 5 replies developers images Improve this question

I’m interested in this too! Thanks for asking.

Ray

Answered 10 months ago · Improve this answer

Hey Ray,

Best workaround I've found is using Typora. You can right-click on images in Typora and change the syntax the HTML. So I've been doing that, then manually adding the lazy loading piece.

It would be better if something could be automated within Blot though. :)

Thanks,

Kev

Answered 10 months ago · Improve this answer

Thinking about it...an option under the "Images" section of the Services Dashboard that enables lazy loading for images would be perfect.

Then at the backend, Blot would just inject loading="lazy" into all <img> tags at build. 🤷‍♂️

Kev

Answered 10 months ago · Improve this answer

I believe this could be implemented easily at the template level. I'll consider making it a plugin feature and follow up here

Answered 10 months ago · Improve this answer

Great. Thanks, Kev & David.

Answered 10 months ago · Improve this answer