Load images lazily

.eleventy.js

@@ -4,9 +4,10 @@ const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
 
 // extra features for markdown
 const markdownIt = require('markdown-it')
-const anchors = require('markdown-it-anchor')
 const abbrs = require('markdown-it-abbr')
+const anchors = require('markdown-it-anchor')
 const footnotes = require('markdown-it-footnote')
+const lazyLoading = require('@junwatu/markdown-it-lazy-loading')
 
 const { DateTime } = require('luxon')
 const header = require('./src/_includes/filters/header')
@@ -33,9 +34,10 @@ module.exports = function (config) {
 
   config.setLibrary("md",
     markdownIt(mdOptions)
+      .use(abbrs)
       .use(anchors)
       .use(footnotes)
-      .use(abbrs)
+      .use(lazyLoading, { img: 'lazy' }) 
   )
 
   // template filters

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@11ty/eleventy-plugin-rss": "^1.1.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
+    "@junwatu/markdown-it-lazy-loading": "1.0.0-beta.4",
     "@remy/webmention": "^1.4.5",
     "@types/markdown-it": "^12.2.3",
     "autoprefixer": "^10.4.12",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ specifiers:
   '@11ty/eleventy': ^2.0.0-canary.16
   '@11ty/eleventy-plugin-rss': ^1.1.2
   '@11ty/eleventy-plugin-syntaxhighlight': ^4.1.0
+  '@junwatu/markdown-it-lazy-loading': 1.0.0-beta.4
   '@remy/webmention': ^1.4.5
   '@thi.ng/hiccup': 3.6.22
   '@types/markdown-it': ^12.2.3
@@ -22,6 +23,7 @@ specifiers:
 dependencies:
   '@11ty/eleventy-plugin-rss': 1.1.2
   '@11ty/eleventy-plugin-syntaxhighlight': 4.1.0
+  '@junwatu/markdown-it-lazy-loading': 1.0.0-beta.4
   '@remy/webmention': 1.4.5
   '@types/markdown-it': 12.2.3
   autoprefixer: 10.4.12_postcss@8.4.17
@@ -165,6 +167,10 @@ packages:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
 
+  /@junwatu/markdown-it-lazy-loading/1.0.0-beta.4:
+    resolution: {integrity: sha512-hYX5tPnZf+tre9OguANYcm/WlAc/m65ana9Z26fCiLfkmwJOhVBYa1EWX9IVVHoX0RFSpRxQ0rZz7smwLRHcTQ==}
+    dev: false
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}