From d40e36cf3dae2e04668492390fe1f2457f71bc3f Mon Sep 17 00:00:00 2001 From: LekoArts Date: Mon, 5 Dec 2022 14:34:05 +0100 Subject: [PATCH 1/4] initial --- packages/gatsby-plugin-sharp/README.md | 2 +- packages/gatsby-plugin-sharp/src/gatsby-node.js | 2 +- packages/gatsby-plugin-sharp/src/image-data.ts | 2 ++ packages/gatsby-plugin-sharp/src/index.js | 11 +++++++---- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/gatsby-plugin-sharp/README.md b/packages/gatsby-plugin-sharp/README.md index 6d6cbeba925d9..c2747096b85f9 100644 --- a/packages/gatsby-plugin-sharp/README.md +++ b/packages/gatsby-plugin-sharp/README.md @@ -347,7 +347,7 @@ GATSBY_JPEG_ENCODER=MOZJPEG ### Allow build to continue on image processing error -By default, the build will fail when it encounters an error while processing an image. You can change this so that it continues the build process by setting the plugin option `failOnError` to `false`. Sharp will still throw an error and display it in the console as a GraphQL error, but it will not exit the process. It is important to note that any images that would have otherwise failed will not be accessible via `childImageSharp` until the underlying issue with the image is addressed. +By default, the build will fail when it encounters an error while processing an image. You can change this so that it continues the build process by setting the plugin option `failOn` to `none`. Sharp will still throw an error and display it in the console as a GraphQL error, but it will not exit the process. It is important to note that any images that would have otherwise failed will not be accessible via `childImageSharp` until the underlying issue with the image is addressed. ### EXIF and ICC metadata diff --git a/packages/gatsby-plugin-sharp/src/gatsby-node.js b/packages/gatsby-plugin-sharp/src/gatsby-node.js index 29a5165686b1e..934b0c19c47a3 100644 --- a/packages/gatsby-plugin-sharp/src/gatsby-node.js +++ b/packages/gatsby-plugin-sharp/src/gatsby-node.js @@ -208,7 +208,7 @@ exports.pluginOptionsSchema = ({ Joi }) => ), stripMetadata: Joi.boolean().default(true), defaultQuality: Joi.number().default(50), - // TODO(v5): Remove deprecated failOnError option + // TODO(v6): Remove deprecated failOnError option failOnError: Joi.boolean().default(true), failOn: Joi.any() .valid(`none`, `truncated`, `error`, `warning`) diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts index 81364e3cd0e7e..386c67dd3d73c 100644 --- a/packages/gatsby-plugin-sharp/src/image-data.ts +++ b/packages/gatsby-plugin-sharp/src/image-data.ts @@ -396,6 +396,8 @@ export async function generateImageData({ imageProps.placeholder = { fallback, } + // @ts-ignore - Type is incorrect because it's removed + // TODO(v6): Remove this codepath } else if (placeholder === `tracedSVG`) { const fallback: string = await traceSVG({ file, diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index c1fef34709bbc..ddb7dc46f87fe 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/packages/gatsby-plugin-sharp/src/index.js @@ -395,9 +395,10 @@ async function traceSVG(args) { } async function stats({ file, reporter }) { + const pluginOptions = getPluginOptions() let imgStats try { - const pipeline = sharp() + const pipeline = sharp({ failOn: pluginOptions.failOn }) fs.createReadStream(file.absolutePath).pipe(pipeline) imgStats = await pipeline.stats() @@ -417,11 +418,12 @@ async function stats({ file, reporter }) { let didShowTraceSVGRemovalWarningFluid = false async function fluid({ file, args = {}, reporter, cache }) { - const options = healOptions(getPluginOptions(), args, file.extension) + const pluginOptions = getPluginOptions() + const options = healOptions(pluginOptions, args, file.extension) let metadata try { - const pipeline = sharp() + const pipeline = sharp({ failOn: pluginOptions.failOn }) fs.createReadStream(file.absolutePath).pipe(pipeline) metadata = await pipeline.metadata() @@ -634,7 +636,8 @@ async function fluid({ file, args = {}, reporter, cache }) { let didShowTraceSVGRemovalWarningFixed = false async function fixed({ file, args = {}, reporter, cache }) { - const options = healOptions(getPluginOptions(), args, file.extension) + const pluginOptions = getPluginOptions() + const options = healOptions(pluginOptions, args, file.extension) // if no width is passed, we need to resize the image based on the passed height const fixedDimension = options.width === undefined ? `height` : `width` From e761986e36878a6b8dea4f123771093328b78a90 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Mon, 5 Dec 2022 14:35:55 +0100 Subject: [PATCH 2/4] revert --- packages/gatsby-plugin-sharp/src/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index ddb7dc46f87fe..5a635f330a12e 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/packages/gatsby-plugin-sharp/src/index.js @@ -636,8 +636,7 @@ async function fluid({ file, args = {}, reporter, cache }) { let didShowTraceSVGRemovalWarningFixed = false async function fixed({ file, args = {}, reporter, cache }) { - const pluginOptions = getPluginOptions() - const options = healOptions(pluginOptions, args, file.extension) + const options = healOptions(getPluginOptions(), args, file.extension) // if no width is passed, we need to resize the image based on the passed height const fixedDimension = options.width === undefined ? `height` : `width` From cb2fb097e035840f0e78c7f74f9519e69ade5137 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Mon, 5 Dec 2022 14:45:27 +0100 Subject: [PATCH 3/4] remove dead codepath --- packages/gatsby-plugin-sharp/src/image-data.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts index 386c67dd3d73c..a7b394c30fe0f 100644 --- a/packages/gatsby-plugin-sharp/src/image-data.ts +++ b/packages/gatsby-plugin-sharp/src/image-data.ts @@ -396,19 +396,6 @@ export async function generateImageData({ imageProps.placeholder = { fallback, } - // @ts-ignore - Type is incorrect because it's removed - // TODO(v6): Remove this codepath - } else if (placeholder === `tracedSVG`) { - const fallback: string = await traceSVG({ - file, - args: tracedSVGOptions, - fileArgs: args, - cache, - reporter, - }) - imageProps.placeholder = { - fallback, - } } else if (metadata?.dominantColor) { imageProps.backgroundColor = metadata.dominantColor } From f996c8fa49b31ba67d3e6b0e79d74fdf2dcc9be2 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 7 Dec 2022 10:48:15 +0100 Subject: [PATCH 4/4] update docs --- packages/gatsby-plugin-sharp/README.md | 103 +++++-------------------- 1 file changed, 19 insertions(+), 84 deletions(-) diff --git a/packages/gatsby-plugin-sharp/README.md b/packages/gatsby-plugin-sharp/README.md index c2747096b85f9..ef48ae6ee3f4c 100644 --- a/packages/gatsby-plugin-sharp/README.md +++ b/packages/gatsby-plugin-sharp/README.md @@ -26,35 +26,28 @@ npm install gatsby-plugin-sharp ## How to use -```javascript -// In your gatsby-config.js -plugins: [ - { - resolve: `gatsby-plugin-sharp`, - options: { - // Defaults used for gatsbyImageData and StaticImage - defaults: {}, - // Set to none to allow builds to continue on image errors - failOn: `none`, - // deprecated options and their defaults: - base64Width: 20, - forceBase64Format: ``, // valid formats: png,jpg,webp - useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`, - stripMetadata: true, - defaultQuality: 50, +```js:title=gatsby-config.js +module.exports = { + plugins: [ + { + resolve: `gatsby-plugin-sharp`, + options: { + // Defaults used for gatsbyImageData and StaticImage + defaults: {}, + // Relates to "options.failOn" in https://sharp.pixelplumbing.com/api-constructor#parameters + failOn: `warning`, + }, }, - }, -] + ] +} ``` ## Options -- `defaults`: default values used for `gatsbyImageData` and `StaticImage` from [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image). +- `defaults`: Default values used for `gatsbyImageData` and `StaticImage` from [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image). Available options are: `formats`,`placeholder`,`quality`,`breakpoints`,`backgroundColor`,`tracedSVGOptions`,`blurredOptions`,`jpgOptions`,`pngOptions`,`webpOptions`,`avifOptions`. For details of these, see [the reference guide](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image). -- `failOn`: default = `warning`. By default builds will fail if there is a corrupted image. Set to `none` to continue the build on error. The image will return `undefined`. You can customize this option, see [`options.failOn`](https://sharp.pixelplumbing.com/api-constructor#parameters). - -Other options are deprecated, and should only be used for the legacy `fixed` and `fluid` functions. +- `failOn`: default = `warning`. By default, builds will fail if sharp finds an image with corrupted pixel values. When setting `failOn` to `none` the image will return `undefined` instead. You can customize this option, see [`options.failOn`](https://sharp.pixelplumbing.com/api-constructor#parameters). Images with corrupt image headers/metadata will always fail, regardless of this setting. ## Methods @@ -215,8 +208,8 @@ Rotate the image (after cropping). See Sharp's [rotate][7]. #### grayscale -Uses Sharp's [greyscale][8] to convert the source image to 8-bit greyscale, 256 -shades of grey, e.g. +Uses Sharp's [grayscale][8] to convert the source image to 8-bit grayscale, 256 +shades of gray, e.g. ```graphql allImageSharp { @@ -287,67 +280,9 @@ quoting the Sharp documentation: > premultiplication > will occur. -#### tracedSVG - -Generates a traced SVG of the image (see [the original GitHub issue][9]) and -returns the SVG as "[optimized URL-encoded][10]" `data:` URI. It used in -[gatsby-image](/plugins/gatsby-image/) to provide an -alternative to the default inline base64 placeholder image. - -Uses [node-potrace][11] and [SVGO][12] under the hood. Default settings for -node-potrace: - -```javascript - { - color: `lightgray`, - optTolerance: 0.4, - turdSize: 100, - turnPolicy: TURNPOLICY_MAJORITY, - } -``` - -All [node-potrace `Potrace` parameters][13] are exposed and can be set via the -`traceSVG` argument: - -```javascript -fixed( - traceSVG: { - color: "#f00e2e" - turnPolicy: TURNPOLICY_MINORITY - blackOnWhite: false - } -) { - src - srcSet - tracedSVG -} -``` - -### Setting a default quality - -You can pass a default image quality to `sharp` by setting the `defaultQuality` option. - -### Using MozJPEG - -You can opt-in to use [MozJPEG][16] for jpeg-encoding. MozJPEG provides even -better image compression than the default encoder used in `gatsby-plugin-sharp`. -However, when using MozJPEG the build time of your Gatsby project will increase -significantly. - -To enable MozJPEG, you can set the `useMozJpeg` plugin option to `true` in -`gatsby-config.js`. - -For backwards compatible reasons, if `useMozJpeg` is not defined in the plugin -options, the [environment variable](/docs/environment-variables/#environment-variables) -`GATSBY_JPEG_ENCODER` acts as a fallback if set to `MOZJPEG`: - -```shell -GATSBY_JPEG_ENCODER=MOZJPEG -``` - -### Allow build to continue on image processing error +### Setting sharp's level of sensitivity to invalid images -By default, the build will fail when it encounters an error while processing an image. You can change this so that it continues the build process by setting the plugin option `failOn` to `none`. Sharp will still throw an error and display it in the console as a GraphQL error, but it will not exit the process. It is important to note that any images that would have otherwise failed will not be accessible via `childImageSharp` until the underlying issue with the image is addressed. +By default, the build will fail when sharp encounters an error while processing an image. You can change parts of this behavior by changing the `failOn` setting to `none`. In that case sharp will then ignore any errors relating to the pixel values/file structure of your file. However, if your image has corrupt image headers/metadata the build will still fail. It is important to note that any images that would have otherwise failed will not be accessible via `childImageSharp` until the underlying issue with the image is addressed. ### EXIF and ICC metadata