1---
 2title: "Add lazy loading of images in Jekyll posts"
 3url: add-lazy-loading-to-jekyll-posts.html
 4date: 2023-11-05T09:04:28+02:00
 5type: note
 6draft: false
 7---
 8
 9Normally you define images with `![]()` in markdown files. But jekyll also
10provides a way to adding custom attributes to tags with `{:attr="value"}`.
11
12If you have lots of posts this command will append `` to all
13images in all your markdown files.
14
15```md
16![image-title](/path/to/your/image.jpg)
17```
18
19will become
20
21```md
22![image-title](/path/to/your/image.jpg)
23```
24
25Shell line bellow. Go into the folder where your posts are (probably `_posts`).
26
27```sh
28find . -type f -name "*.md" -exec sed -i -E 's/(\!\[.*\]\((.*?)\))$/\1/' {} \;
29```
30
31Under the hood this adds `loading="lazy"` to HTML `img` nodes.
32
33That is about it.