Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jun 2, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/gatsby-remark-images/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
31 changes: 27 additions & 4 deletions packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
Expand Down Expand Up @@ -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>"
Expand Down Expand Up @@ -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>"
Expand Down Expand Up @@ -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>"
Expand All @@ -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>"
`;
Expand All @@ -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>"
`;
Expand All @@ -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>"
`;
Expand All @@ -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>"
`;
Expand Down Expand Up @@ -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>"
Expand Down Expand Up @@ -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>"
Expand Down Expand Up @@ -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>"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions packages/gatsby-remark-images/src/__tests__/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand All @@ -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`,
Expand All @@ -54,6 +56,7 @@ describe(`pluginOptionsSchema`, () => {
withWebp: true,
tracedSVG: true,
loading: `eager`,
decoding: `async`,
disableBgImageOnAlpha: true,
disableBgImage: true,
srcSetBreakpoints: [400, 600, 800],
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-remark-images/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ exports.DEFAULT_OPTIONS = {
withAvif: false,
tracedSVG: false,
loading: `lazy`,
decoding: `async`,
disableBgImageOnAlpha: false,
disableBgImage: false,
}
Expand Down
6 changes: 6 additions & 0 deletions packages/gatsby-remark-images/src/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Loading