markdown-it-image-lazy-loading - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

index.js

 'use strict';
 
-module.exports = function lazy_loading_plugin(md, options) {
+module.exports = function lazy_loading_plugin(md, mdOptions) {
   var defaultImageRenderer = md.renderer.rules.image;
@@ -9,4 +9,17 @@
     token.attrSet('loading', 'lazy');
+
+    if(mdOptions && mdOptions.base_path && mdOptions.image_size === true){
+      const sizeOf = require('image-size');
+      const path = require('path');
+
+      const imgSrc = token.attrGet('src');
+      const imgPath = path.join(mdOptions.base_path, imgSrc);
+      const dimensions = sizeOf(imgPath);
+
+      token.attrSet('width', dimensions.width);
+      token.attrSet('height', dimensions.height);
+    }
+
     return defaultImageRenderer(tokens, idx, options, env, self);
   };
 };

package.json

 {
   "name": "markdown-it-image-lazy-loading",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "a markdown-it plugin supporting Chrome 75's native image lazy-loading",
   "main": "index.js",
   "scripts": {
-    "test": "node testing.js"
+    "test": "npx tape test/*.js"
   },
@@ -18,6 +18,9 @@ "keywords": [
   "license": "MIT",
+  "dependencies": {
+    "image-size": "^1.0.0"
+  },
   "devDependencies": {
-    "markdown-it": "^9.1.0",
-    "tape": "^4.11.0"
+    "markdown-it": "12.x",
+    "tape": "5.x"
   }
 }

README.md

@@ -20,4 +20,26 @@ A markdown-it plugin supporting Chrome 75's [native image lazy-loading](https://addyosmani.com/blog/lazy-loading/).
 
+The plugin can also add `width` and `height` attributes to each image. This can prevent [cumulative layout shifts (CLS)](https://web.dev/cls/):
+
+```javascript
+md.use(lazy_loading, {
+    image_size: true,
+
+    // 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" width="100" height="100"></p>\n
+```
+
+To keep images responsive, also include the following CSS:
+```css
+img{
+    max-width: 100%;
+    height: auto;
+}
+```
+
 ## License
 
 MIT

No alert changes

Improved metrics

Total package byte prevSize

2452

increased by38.14%

Number of lines in readme file

45

increased by95.65%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of package files

3

decreased by-25%

Lines of code

18

decreased by-10%

Dependency changes

• + Addedimage-size@^1.0.0

• + Addedimage-size@1.1.1(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedqueue@6.0.2(transitive)