aboutsummaryrefslogtreecommitdiff
path: root/content/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md
blob: 5d6dae4c79484b5f4ae551035e6dde7f2c95aa05 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
---
title: "Add lazy loading of images in Jekyll posts"
url: /add-lazy-loading-to-jekyll-posts.html
date: 2023-11-05T09:04:28+02:00
type: note
draft: false
---

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.

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

will become

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

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

```sh
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.