diff --git a/packages/gatsby-plugin-image/src/babel-helpers.ts b/packages/gatsby-plugin-image/src/babel-helpers.ts index f1687558126e1..c84a181fbd8ee 100644 --- a/packages/gatsby-plugin-image/src/babel-helpers.ts +++ b/packages/gatsby-plugin-image/src/babel-helpers.ts @@ -12,7 +12,7 @@ export const SHARP_ATTRIBUTES = new Set([ `maxHeight`, `quality`, `avifOptions`, - `jpegOptions`, + `jpgOptions`, `pngOptions`, `webpOptions`, `blurredOptions`, diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts index bb04bc1335bb5..7cd95ce80f87b 100644 --- a/packages/gatsby-plugin-sharp/src/image-data.ts +++ b/packages/gatsby-plugin-sharp/src/image-data.ts @@ -148,26 +148,30 @@ export async function generateImageData({ } let primaryFormat: ImageFormat | undefined - let options: Record | undefined if (useAuto) { primaryFormat = normalizeFormat(metadata.format || file.extension) } else if (formats.has(`png`)) { primaryFormat = `png` - options = args.pngOptions } else if (formats.has(`jpg`)) { primaryFormat = `jpg` - options = args.jpgOptions } else if (formats.has(`webp`)) { primaryFormat = `webp` - options = args.webpOptions } else if (formats.has(`avif`)) { reporter.warn( `Image ${file.relativePath} specified only AVIF format, with no fallback format. This will mean your site cannot be viewed in all browsers.` ) primaryFormat = `avif` - options = args.webpOptions } + const optionsMap = { + jpg: args.jpgOptions, + png: args.pngOptions, + webp: args.webpOptions, + avif: args.avifOptions, + } + + const options = primaryFormat ? optionsMap[primaryFormat] : undefined + const imageSizes: { sizes: Array presentationWidth: number