Add new filters for img lazyloading

Feature requests
1

I’m trying to make images lazyloading. But I didn’t find a good way to manipulate img tag from page.content.
I want somthing like this:

<img src="image.jpg" alt="..." loading="lazy" />

or

<img alt="A lazy image" class="lazy" data-src="lazy.jpg" />

Can this be done by something like a filter?

{{ page.content | lazyimg }}
2

Sounds like it can be done in a shortcode?

3

It is.
But what i am building is a blog theme. User’s markdown may also used in other platform. I want the orginal markdown syntax. People who is writing markdown don’t want to write their every img in shortcode.

4

I guess a filter that add a loading='lazy' attribute to img tag won’t be hard to achieve.

5

If someone came from another SSG, they don’t want to rewrite their every ![]() for a platform-specific issue.