feat(gatsby-transformer-sharp): Resolver API changes

e2e-tests/visual-regression/src/pages/images/constrained.js

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "cornwall.jpg" }) {
         childImageSharp {
-          gatsbyImage(maxWidth: 1024, layout: CONSTRAINED) {
-            imageData
-          }
+          gatsbyImageData(maxWidth: 1024, layout: CONSTRAINED)
         }
       }
     }

e2e-tests/visual-regression/src/pages/images/fixed-too-big.js

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "landsend.jpg" }) {
         childImageSharp {
-          gatsbyImage(width: 500, height: 500, layout: FIXED) {
-            imageData
-          }
+          gatsbyImageData(width: 500, height: 500, layout: FIXED)
         }
       }
     }

e2e-tests/visual-regression/src/pages/images/fixed.js

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "cornwall.jpg" }) {
         childImageSharp {
-          gatsbyImage(width: 240, height: 100, layout: FIXED) {
-            imageData
-          }
+          gatsbyImageData(width: 240, height: 100, layout: FIXED)
         }
       }
     }

e2e-tests/visual-regression/src/pages/images/fluid.js

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "cornwall.jpg" }) {
         childImageSharp {
-          gatsbyImage(maxWidth: 1024, layout: FLUID) {
-            imageData
-          }
+          gatsbyImageData(maxWidth: 1024, layout: FLUID)
         }
       }
     }

e2e-tests/visual-regression/src/pages/static-images/constrained.js

@@ -13,8 +13,6 @@ const Page = () => {
           layout="constrained"
           alt="cornwall"
           maxWidth={1024}
-          placeholder="blurred"
-          webP
         />
       </TestWrapper>
     </Layout>

packages/gatsby-plugin-image/src/babel-helpers.ts

@@ -9,29 +9,17 @@ export const SHARP_ATTRIBUTES = new Set([
   `maxWidth`,
   `maxHeight`,
   `quality`,
-  `jpegQuality`,
-  `pngQuality`,
-  `webpQuality`,
-  `grayscale`,
-  `toFormat`,
-  `cropFocus`,
-  `pngCompressionSpeed`,
-  `rotate`,
-  `duotone`,
+  `jpegOptions`,
+  `pngOptions`,
+  `webpOptions`,
+  `blurredOptions`,
+  `transformOptions`,
   `width`,
   `height`,
   `placeholder`,
   `tracedSVGOptions`,
-  `webP`,
-  `outputPixelDensities`,
   `sizes`,
-  `fit`,
   `background`,
-  `base64Width`,
-  `jpegProgressive`,
-  `toFormatBase64`,
-  `trim`,
-  `srcSetBreakpoints`,
 ])
 
 export function evaluateImageAttributes(

packages/gatsby-plugin-image/src/components/hooks.ts

@@ -32,14 +32,12 @@ export function hasImageLoaded(cacheKey: string): boolean {
 
 export type FileNode = Node & {
   childImageSharp?: Node & {
-    gatsbyImage?: Node & {
-      imageData: ISharpGatsbyImageData
-    }
+    gatsbyImageData?: ISharpGatsbyImageData
   }
 }
 
 export const getImage = (file: FileNode): ISharpGatsbyImageData | undefined =>
-  file?.childImageSharp?.gatsbyImage?.imageData
+  file?.childImageSharp?.gatsbyImageData
 
 export function getWrapperProps(
   width: number,

packages/gatsby-plugin-image/src/utils.ts

@@ -30,7 +30,6 @@ export interface ICommonImageProps {
 export interface IFluidImageProps extends ICommonImageProps {
   maxWidth?: number
   maxHeight?: number
-  srcSetBreakpoints?: Array<number>
   fit?: number
   background?: number
 }

packages/gatsby-plugin-sharp/src/__tests__/utils.js

@@ -292,28 +292,52 @@ describe(`calculateImageSizes (fluid & constrained)`, () => {
     const testsCases = [
       { args: { maxWidth: 20, maxHeight: 20 }, result: [20, 20] },
       {
-        args: { maxWidth: 20, maxHeight: 20, fit: sharp.fit.fill },
+        args: {
+          maxWidth: 20,
+          maxHeight: 20,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [20, 20],
       },
       {
-        args: { maxWidth: 20, maxHeight: 20, fit: sharp.fit.inside },
+        args: {
+          maxWidth: 20,
+          maxHeight: 20,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [20, 10],
       },
       {
-        args: { maxWidth: 20, maxHeight: 20, fit: sharp.fit.outside },
+        args: {
+          maxWidth: 20,
+          maxHeight: 20,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [41, 20],
       },
       { args: { maxWidth: 200, maxHeight: 200 }, result: [200, 200] },
       {
-        args: { maxWidth: 200, maxHeight: 200, fit: sharp.fit.fill },
+        args: {
+          maxWidth: 200,
+          maxHeight: 200,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [200, 200],
       },
       {
-        args: { maxWidth: 200, maxHeight: 200, fit: sharp.fit.inside },
+        args: {
+          maxWidth: 200,
+          maxHeight: 200,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [200, 97],
       },
       {
-        args: { maxWidth: 200, maxHeight: 200, fit: sharp.fit.outside },
+        args: {
+          maxWidth: 200,
+          maxHeight: 200,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [413, 200],
       },
     ]
@@ -341,28 +365,52 @@ describe(`calculateImageSizes (fluid & constrained)`, () => {
     const testsCases = [
       { args: { width: 20, height: 20 }, result: [20, 20] },
       {
-        args: { width: 20, height: 20, fit: sharp.fit.fill },
+        args: {
+          width: 20,
+          height: 20,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [20, 20],
       },
       {
-        args: { width: 20, height: 20, fit: sharp.fit.inside },
+        args: {
+          width: 20,
+          height: 20,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [20, 10],
       },
       {
-        args: { width: 20, height: 20, fit: sharp.fit.outside },
+        args: {
+          width: 20,
+          height: 20,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [41, 20],
       },
       { args: { width: 200, height: 200 }, result: [200, 200] },
       {
-        args: { width: 200, height: 200, fit: sharp.fit.fill },
+        args: {
+          width: 200,
+          height: 200,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [200, 200],
       },
       {
-        args: { width: 200, height: 200, fit: sharp.fit.inside },
+        args: {
+          width: 200,
+          height: 200,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [200, 97],
       },
       {
-        args: { width: 200, height: 200, fit: sharp.fit.outside },
+        args: {
+          width: 200,
+          height: 200,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [413, 200],
       },
     ]

packages/gatsby-plugin-sharp/src/image-data.ts

@@ -4,29 +4,39 @@ import { GatsbyCache, Node } from "gatsby"
 import { Reporter } from "gatsby-cli/lib/reporter/reporter"
 import { rgbToHex, calculateImageSizes, getSrcSet, getSizes } from "./utils"
 import { traceSVG, getImageSizeAsync, base64, batchQueueImageResizing } from "."
-import type { SharpInstance } from "sharp"
+import type { Sharp } from "sharp"
 import sharp from "./safe-sharp"
 import { createTransformObject } from "./plugin-options"
+
+type ImageFormat = "jpg" | "png" | "webp" | "" | "auto"
 export interface ISharpGatsbyImageArgs {
   layout?: "fixed" | "fluid" | "constrained"
+  formats?: Array<ImageFormat>
   placeholder?: "tracedSVG" | "dominantColor" | "blurred" | "none"
   tracedSVGOptions?: Record<string, unknown>
   width?: number
   height?: number
   maxWidth?: number
   maxHeight?: number
-  fit?: "contain" | "cover" | "fill" | "inside" | "outside"
-  [key: string]: unknown
+  sizes?: string
+  quality?: number
+  transformOptions: {
+    fit?: "contain" | "cover" | "fill" | "inside" | "outside"
+  }
+  jpgOptions: Record<string, unknown>
+  pngOptions: Record<string, unknown>
+  webpOptions: Record<string, unknown>
+  blurredOptions: { width?: number; toFormat?: ImageFormat }
 }
 export type FileNode = Node & {
   absolutePath?: string
 }
 
 export interface IImageMetadata {
-  width: number
-  height: number
-  format: string
-  density?: string
+  width?: number
+  height?: number
+  format?: string
+  density?: number
   dominantColor?: string
 }
 
@@ -45,7 +55,7 @@ export async function getImageMetadata(
   if (metadata && process.env.NODE_ENV !== `test`) {
     return metadata
   }
-  const pipeline: SharpInstance = sharp(file.absolutePath)
+  const pipeline: Sharp = sharp(file.absolutePath)
 
   const { width, height, density, format } = await pipeline.metadata()
 
@@ -84,12 +94,38 @@ export async function generateImageData({
 }: IImageDataArgs): Promise<ISharpGatsbyImageData | undefined> {
   const {
     layout = `fixed`,
-    placeholder = `dominantColor`,
+    placeholder = `blurred`,
     tracedSVGOptions = {},
+    quality,
   } = args
 
+  const formats = new Set(args.formats)
+  let useAuto = formats.has(``) || formats.has(`auto`) || formats.size === 0
+
+  if (formats.has(`jpg`) && formats.has(`png`)) {
+    reporter.warn(
+      `Specifying both "jpg" and "png" formats is not supported and will be ignored. Please use "auto" instead.`
+    )
+    useAuto = true
+  }
+
   const metadata = await getImageMetadata(file, placeholder === `dominantColor`)
 
+  let primaryFormat: ImageFormat | undefined
+  let options: Record<string, unknown> | undefined
+  if (useAuto) {
+    primaryFormat = (metadata.format || file.extension) as ImageFormat
+  } 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
+  }
+
   const imageSizes: {
     sizes: Array<number>
     presentationWidth: number
@@ -107,10 +143,13 @@ export async function generateImageData({
   const transforms = imageSizes.sizes.map(outputWidth => {
     const width = Math.round(outputWidth)
     const transform = createTransformObject({
-      ...args,
+      quality,
+      ...args.transformOptions,
+      ...options,
+      tracedSVGOptions,
       width,
       height: Math.round(width / imageSizes.aspectRatio),
-      toFormat: args.toFormat || metadata.format,
+      toFormat: primaryFormat,
     })
 
     if (pathPrefix) transform.pathPrefix = pathPrefix
@@ -159,11 +198,14 @@ export async function generateImageData({
     },
   }
 
-  if (args.webP) {
+  if (primaryFormat !== `webp` && formats.has(`webp`)) {
     const transforms = imageSizes.sizes.map(outputWidth => {
       const width = Math.round(outputWidth)
       const transform = createTransformObject({
-        ...args,
+        quality,
+        ...args.transformOptions,
+        ...args.webpOptions,
+        tracedSVGOptions,
         width,
         height: Math.round(width / imageSizes.aspectRatio),
         toFormat: `webp`,
@@ -186,9 +228,16 @@ export async function generateImageData({
   }
 
   if (placeholder === `blurred`) {
+    const placeholderWidth = args.blurredOptions?.width || 20
     const { src: fallback } = await base64({
       file,
-      args: { ...args, width: args.base64Width, height: args.base64Height },
+      args: {
+        ...options,
+        ...args.transformOptions,
+        toFormatBase64: args.blurredOptions?.toFormat,
+        width: placeholderWidth,
+        height: Math.round(placeholderWidth / imageSizes.aspectRatio),
+      },
       reporter,
     })
     imageProps.placeholder = {