feat(gatsby-remark-images): Add decoding prop to img elements (gatsby…

…js#31558)
Rutam21 · Jun 2, 2021 · d45e4fb · d45e4fb
1 parent 542628d
commit d45e4fb
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 4 deletions.
diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md
@@ -73,6 +73,7 @@ a reserved keyword `GATSBY_EMPTY_ALT` can be used.
 | `withAvif`              | `false` | Additionally generate AVIF versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format. Pass `true` for default support, or an object of options to specifically override those for the WebP files. For example, pass `{ quality: 80 }` to have the AVIF images be at quality level 80.                                                                                                                                                                                                                                            |
 | `tracedSVG`             | `false` | Use traced SVGs for placeholder images instead of the "blur up" effect. Pass `true` for traced SVGs with the default settings (seen [here][3]), or an object of options to override the defaults. For example, pass `{ color: "#F00", turnPolicy: "TURNPOLICY_MAJORITY" }` to change the color of the trace to red and the turn policy to `TURNPOLICY_MAJORITY`. See [`node-potrace` parameter documentation][4] for a full listing and explanation of the available options.                                                                                                                                                      |
 | `loading`               | `lazy`  | Set the browser's native lazy loading attribute. One of `lazy`, `eager` or `auto`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `decoding`              | `async` | Set the browser's native decoding attribute. One of `async`, `sync` or `auto`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `disableBgImageOnAlpha` | `false` | Images containing transparent pixels around the edges results in images with blurry edges. As a result, these images do not work well with the "blur up" technique used in this plugin. As a workaround to disable background images with blurry edges on images containing transparent pixels, enable this setting.                                                                                                                                                                                                                                                                                                               |
 | `disableBgImage`        | `false` | Remove background image and its' inline style. Useful to prevent `Stylesheet too long` error on AMP.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `srcSetBreakpoints`     |         | By default gatsby generates 0.25x, 0.5x, 1x, 1.5x, 2x, and 3x sizes of thumbnails. If you want more control over which sizes are output you can use the `srcSetBreakpoints` parameter. For example, if you want images that are 200, 340, 520, and 890 wide you can add `srcSetBreakpoints: [ 200, 340, 520, 890 ]` as a parameter. You will also get `maxWidth` as a breakpoint (which is 650 by default), so you will actually get `[ 200, 340, 520, 650, 890 ]` as breakpoints.                                                                                                                                                 |

diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -25,6 +25,7 @@ exports[`disableBgImage disables background image when disableBgImage === true 1
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -55,6 +56,7 @@ exports[`disableBgImage does not disable background image when disableBgImage ==
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -85,6 +87,7 @@ exports[`disableBgImageOnAlpha disables background image on transparent images w
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -115,6 +118,7 @@ exports[`disableBgImageOnAlpha does not disable background image on transparent
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -138,6 +142,7 @@ exports[`it handles goofy nesting properly 1`] = `
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
     </span>"
 `;
@@ -160,6 +165,7 @@ exports[`it leaves images that are already linked alone 1`] = `
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
     </span>"
 `;
@@ -168,23 +174,23 @@ exports[`it leaves linked HTML img tags alone 1`] = `
 "<a href=\\"https://example.org\\">
   <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\">
       <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"></span>
-  <img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
+  <img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\" decoding=\\"async\\">
     </span>
 </a>"
 `;
 
 exports[`it leaves single-line linked HTML img tags alone 1`] = `
 "<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\">
       <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"></span>
-  <img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
+  <img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\" decoding=\\"async\\">
     </span>"
 `;
 
 exports[`it transforms HTML img tags 1`] = `
 "<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\">
       <a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"></span>
-  <img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
+  <img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\" decoding=\\"async\\">
   </a>
     </span>"
 `;
@@ -193,7 +199,7 @@ exports[`it transforms HTML img tags with query strings 1`] = `
 "<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\">
       <a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"></span>
-  <img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
+  <img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\" decoding=\\"async\\">
   </a>
     </span>"
 `;
@@ -223,6 +229,7 @@ exports[`it transforms image references in markdown 1`] = `
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -253,6 +260,7 @@ exports[`it transforms images in markdown 1`] = `
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -283,6 +291,7 @@ exports[`it transforms images in markdown with query strings 1`] = `
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -321,6 +330,7 @@ exports[`it transforms images in markdown with the "withAvif" option 1`] = `
             alt=\\"image\\"
             title=\\"image\\"
             loading=\\"lazy\\"
+            decoding=\\"async\\"
             style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
           />
         </picture>
@@ -361,6 +371,7 @@ exports[`it transforms images in markdown with the "withWebp" option 1`] = `
             alt=\\"image\\"
             title=\\"image\\"
             loading=\\"lazy\\"
+            decoding=\\"async\\"
             style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
           />
         </picture>
@@ -393,6 +404,7 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>"
@@ -424,6 +436,7 @@ exports[`markdownCaptions display title in markdown as caption when showCaptions
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -457,6 +470,7 @@ exports[`markdownCaptions display title in text as caption when showCaptions ===
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -490,6 +504,7 @@ exports[`showCaptions display alt as caption if specified first in showCaptions
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -523,6 +538,7 @@ exports[`showCaptions display alt as caption if specified in showCaptions array
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -556,6 +572,7 @@ exports[`showCaptions display alt as caption if specified in showCaptions array,
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -589,6 +606,7 @@ exports[`showCaptions display alt as caption if title was not found and showCapt
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -622,6 +640,7 @@ exports[`showCaptions display title as caption if specified first in showCaption
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -655,6 +674,7 @@ exports[`showCaptions display title as caption if specified in showCaptions arra
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -688,6 +708,7 @@ exports[`showCaptions display title as caption when showCaptions === true 1`] =
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -721,6 +742,7 @@ exports[`showCaptions fallback to alt as caption if specified second in showCapt
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>
@@ -754,6 +776,7 @@ exports[`showCaptions fallback to title as caption if specified second in showCa
         sizes=\\"(max-width: 650px) 100vw, 650px\\"
         style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
         loading=\\"lazy\\"
+        decoding=\\"async\\"
       />
   </a>
     </span>

diff --git a/packages/gatsby-remark-images/src/__tests__/gatsby-node.js b/packages/gatsby-remark-images/src/__tests__/gatsby-node.js
@@ -16,6 +16,7 @@ describe(`pluginOptionsSchema`, () => {
       `"withWebp" must be one of [object, boolean]`,
       `"tracedSVG" must be one of [boolean, object]`,
       `"loading" must be one of [lazy, eager, auto]`,
+      `"decoding" must be one of [async, sync, auto]`,
       `"disableBgImageOnAlpha" must be a boolean`,
       `"disableBgImage" must be a boolean`,
       `"srcSetBreakpoints" must be an array`,
@@ -33,6 +34,7 @@ describe(`pluginOptionsSchema`, () => {
       withWebp: `This should be a boolean or an object`,
       tracedSVG: `This should be a boolean`,
       loading: `This should be lazy, eager or auto`,
+      decoding: `This should be async, sync or auto`,
       disableBgImageOnAlpha: `This should be a boolean`,
       disableBgImage: `This should be a boolean`,
       srcSetBreakpoints: `This should be an array`,
@@ -54,6 +56,7 @@ describe(`pluginOptionsSchema`, () => {
       withWebp: true,
       tracedSVG: true,
       loading: `eager`,
+      decoding: `async`,
       disableBgImageOnAlpha: true,
       disableBgImage: true,
       srcSetBreakpoints: [400, 600, 800],

diff --git a/packages/gatsby-remark-images/src/constants.js b/packages/gatsby-remark-images/src/constants.js
@@ -9,6 +9,7 @@ exports.DEFAULT_OPTIONS = {
   withAvif: false,
   tracedSVG: false,
   loading: `lazy`,
+  decoding: `async`,
   disableBgImageOnAlpha: false,
   disableBgImage: false,
 }

diff --git a/packages/gatsby-remark-images/src/gatsby-node.js b/packages/gatsby-remark-images/src/gatsby-node.js
@@ -101,6 +101,12 @@ exports.pluginOptionsSchema = function ({ Joi }) {
       .description(
         `Set the browser’s native lazy loading attribute. One of lazy, eager or auto.`
       ),
+    decoding: Joi.string()
+      .valid(`async`, `sync`, `auto`)
+      .default(`async`)
+      .description(
+        `Set the browser’s native decoding attribute. One of async, sync or auto.`
+      ),
     disableBgImageOnAlpha: Joi.boolean()
       .default(false)
       .description(