feat: support decoding attribute

README.md

@@ -13,6 +13,17 @@ const md = require('markdown-it')();
 const lazy_loading = require('markdown-it-image-lazy-loading');
 md.use(lazy_loading);
 
+md.render(`![](example.png "image title")`);
+// <p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n
+```
+
+If you want the `decoding="async"` attribute, enable the plugin's `decoding` option.
+
+```javascript
+md.use(lazy_loading, {
+  decoding: true,
+});
+
 md.render(`![](example.png "image title")`);
 // <p><img src="example.png" alt="" title="image title" loading="lazy" decoding="async"></p>\n
 ```
@@ -21,14 +32,14 @@ The plugin can also add `width` and `height` attributes to each image. This can
 
 ```javascript
 md.use(lazy_loading, {
-    image_size: true,
+  image_size: true,
 
-    // Where your images are stored
-    base_path: __dirname + 'src/',
+  // Where your images are stored
+  base_path: __dirname + 'src/',
 });
 
 md.render(`![](example.png "image title")`);
-// <p><img src="example.png" alt="" title="image title" loading="lazy" decoding="async" width="100" height="100"></p>\n
+// <p><img src="example.png" alt="" title="image title" loading="lazy" width="100" height="100"></p>\n
 ```
 
 To keep images responsive, also include the following CSS:

index.js

@@ -6,9 +6,12 @@ module.exports = function lazy_loading_plugin(md, mdOptions) {
   md.renderer.rules.image = function (tokens, idx, options, env, self) {
     var token = tokens[idx];
     token.attrSet('loading', 'lazy');
-    token.attrSet('decoding', 'async');
 
-    if(mdOptions && mdOptions.base_path && mdOptions.image_size === true){
+    if (mdOptions && mdOptions.decoding === true) {
+      token.attrSet('decoding', 'async');
+    }
+
+    if (mdOptions && mdOptions.base_path && mdOptions.image_size === true) {
       const sizeOf = require('image-size');
       const path = require('path');
 

package.json

@@ -19,7 +19,7 @@
     "image-size": "^1.0.0"
   },
   "devDependencies": {
-    "markdown-it": "12.x",
-    "tape": "5.x"
+    "markdown-it": "^12.3.0",
+    "tape": "^5.3.2"
   }
 }

test/basic.js

@@ -9,7 +9,7 @@ test('lazy loading test', function (t) {
 
   t.equal(
     md.render(`![](example.png "image title")`),
-    '<p><img src="example.png" alt="" title="image title" loading="lazy" decoding="async"></p>\n'
+    '<p><img src="example.png" alt="" title="image title" loading="lazy"></p>\n'
   );
 
 });

test/decoding.js

@@ -0,0 +1,18 @@
+var test = require('tape');
+
+var md = require('markdown-it')();
+var lazy_loading = require('../index.js');
+md.use(lazy_loading, {
+  decoding: true,
+});
+
+test('decoding test', function (t) {
+  t.plan(1);
+
+  t.equal(
+    md.render(`![](example.png "image title")`),
+    '<p><img src="example.png" alt="" title="image title" loading="lazy" decoding="async"></p>\n'
+  );
+
+});
+

test/image-size.js

@@ -12,7 +12,7 @@ test('image size test', function (t) {
 
   t.equal(
     md.render(`![](dummy-200x200.png "image title")`),
-    '<p><img src="dummy-200x200.png" alt="" title="image title" loading="lazy" decoding="async" width="200" height="200"></p>\n'
+    '<p><img src="dummy-200x200.png" alt="" title="image title" loading="lazy" width="200" height="200"></p>\n'
   );
 
 });