Log in Sign up

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.


5 replies

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


Answered 3 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. :)



Answered 3 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. 🤷‍♂️


Answered 3 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 3 months ago · Improve this answer

Great. Thanks, Kev & David.

Answered 3 months ago · Improve this answer

Markdown allowed
Question or feedback?
Contact us


developers 83 questions bug 40 questions posts 26 questions metadata 24 questions resolved 24 questions templates 23 questions how 14 questions tags 13 questions markdown 11 questions pages 9 questions More tags →
Subscribe for changes
RSS Feed of latest questions