Add lazy loading of images in Jekyll posts

note, Nov 5, 2023, on Mitja Felicijan's blog

Normally you define images with ![]() in markdown files. But jekyll also provides a way to adding custom attributes to tags with {:attr="value"}.

If you have lots of posts this command will append `` to all images in all your markdown files.

![image-title](/path/to/your/image.jpg)

will become

![image-title](/path/to/your/image.jpg)

Shell line bellow. Go into the folder where your posts are (probably _posts).

find . -type f -name "*.md" -exec sed -i -E 's/(\!\[.*\]\((.*?)\))$/\1/' {} \;

Under the hood this adds loading="lazy" to HTML img nodes.

That is about it.



Other notes