diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md index d28bb3bb080ba..4e3a85f1a2093 100644 --- 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 index 1a3328587d799..ea64aca0a8481 100644 --- 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\\" /> " @@ -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\\" /> " @@ -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\\" /> " @@ -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\\" /> " @@ -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\\" /> " `; @@ -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\\" /> " `; @@ -168,7 +174,7 @@ exports[`it leaves linked HTML img tags alone 1`] = ` " - \\"this + \\"this " `; @@ -176,7 +182,7 @@ exports[`it leaves linked HTML img tags alone 1`] = ` exports[`it leaves single-line linked HTML img tags alone 1`] = ` " - \\"this + \\"this " `; @@ -184,7 +190,7 @@ exports[`it transforms HTML img tags 1`] = ` " - \\"my + \\"my " `; @@ -193,7 +199,7 @@ exports[`it transforms HTML img tags with query strings 1`] = ` " - \\"my + \\"my " `; @@ -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\\" /> " @@ -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\\" /> " @@ -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\\" /> " @@ -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;\\" /> @@ -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;\\" /> @@ -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\\" /> " @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> @@ -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\\" /> diff --git a/packages/gatsby-remark-images/src/__tests__/gatsby-node.js b/packages/gatsby-remark-images/src/__tests__/gatsby-node.js index d89b6d6c4c417..26fe943df03f8 100644 --- 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 index d693b2b5b1a5b..f5159c2850e1c 100644 --- 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 index eaa3e2c8b35ec..db2e87e8015d6 100644 --- 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( diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index a3873103ec068..c88b7e9ddeb24 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -191,6 +191,18 @@ module.exports = ( ) } + const decoding = options.decoding + + if (![`async`, `sync`, `auto`].includes(decoding)) { + reporter.warn( + reporter.stripIndent(` + ${chalk.bold(decoding)} is an invalid value for the ${chalk.bold( + `decoding` + )} option. Please pass one of "async", "sync" or "auto". + `) + ) + } + const imageStyle = ` width: 100%; height: 100%; @@ -211,6 +223,7 @@ module.exports = ( sizes="${fluidResult.sizes}" style="${imageStyle}" loading="${loading}" + decoding="${decoding}" /> `.trim() @@ -279,6 +292,7 @@ module.exports = ( alt="${alt}" title="${title}" loading="${loading}" + decoding="${decoding}" style="${imageStyle}" />