gatsbyjs · ascorbic · Nov 10, 2020 · Sep 16, 2020 · Sep 16, 2020 · Sep 16, 2020
diff --git a/...s/image.js/GatsbyImage -- fixed image -- renders correctly on 1027x768.snap.png b/...s/image.js/GatsbyImage -- fixed image -- renders correctly on 1027x768.snap.png
diff --git a/...ots/image.js/GatsbyImage -- fixed image -- renders correctly on ipad-2.snap.png b/...ots/image.js/GatsbyImage -- fixed image -- renders correctly on ipad-2.snap.png
diff --git a/...s/image.js/GatsbyImage -- fixed image -- renders correctly on iphone-6.snap.png b/...s/image.js/GatsbyImage -- fixed image -- renders correctly on iphone-6.snap.png
diff --git a/...xed image smaller than requested size -- renders correctly on 1027x768.snap.png b/...xed image smaller than requested size -- renders correctly on 1027x768.snap.png
diff --git a/...fixed image smaller than requested size -- renders correctly on ipad-2.snap.png b/...fixed image smaller than requested size -- renders correctly on ipad-2.snap.png
diff --git a/...xed image smaller than requested size -- renders correctly on iphone-6.snap.png b/...xed image smaller than requested size -- renders correctly on iphone-6.snap.png
diff --git a/...s/image.js/StaticImage -- fixed image -- renders correctly on 1027x768.snap.png b/...s/image.js/StaticImage -- fixed image -- renders correctly on 1027x768.snap.png
diff --git a/...ots/image.js/StaticImage -- fixed image -- renders correctly on ipad-2.snap.png b/...ots/image.js/StaticImage -- fixed image -- renders correctly on ipad-2.snap.png
diff --git a/...s/image.js/StaticImage -- fixed image -- renders correctly on iphone-6.snap.png b/...s/image.js/StaticImage -- fixed image -- renders correctly on iphone-6.snap.png
diff --git a/...xed image smaller than requested size -- renders correctly on 1027x768.snap.png b/...xed image smaller than requested size -- renders correctly on 1027x768.snap.png
diff --git a/...fixed image smaller than requested size -- renders correctly on ipad-2.snap.png b/...fixed image smaller than requested size -- renders correctly on ipad-2.snap.png
diff --git a/...xed image smaller than requested size -- renders correctly on iphone-6.snap.png b/...xed image smaller than requested size -- renders correctly on iphone-6.snap.png
diff --git a/e2e-tests/visual-regression/src/pages/images/constrained.js b/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)
         }
       }
     }

diff --git a/e2e-tests/visual-regression/src/pages/images/fixed-too-big.js b/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)
         }
       }
     }

diff --git a/e2e-tests/visual-regression/src/pages/images/fixed.js b/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)
         }
       }
     }

diff --git a/e2e-tests/visual-regression/src/pages/images/fluid.js b/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)
         }
       }
     }

diff --git a/e2e-tests/visual-regression/src/pages/static-images/constrained.js b/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>

diff --git a/packages/gatsby-plugin-image/README.md b/packages/gatsby-plugin-image/README.md
@@ -284,9 +284,7 @@ export const query = graphql`
       childImageSharp {
         # Specify the image processing specifications right in the query.
         # Makes it trivial to update as your page's design changes.
-        gatsbyImage(layout: FIXED, width: 125, height: 125) {
-          imageData
-        }
+        gatsbyImageData(layout: FIXED, width: 125, height: 125)
       }
     }
   }

diff --git a/packages/gatsby-plugin-image/src/babel-helpers.ts b/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(

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/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,

diff --git a/packages/gatsby-plugin-image/src/utils.ts b/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
 }

diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json
@@ -29,6 +29,7 @@
   "devDependencies": {
     "@babel/cli": "^7.11.6",
     "@babel/core": "^7.11.6",
+    "@types/sharp": "^0.26.0",
     "babel-preset-gatsby-package": "^0.6.0-next.0",
     "cross-env": "^7.0.2",
     "gatsby-plugin-image": "^0.1.0-next.0"

diff --git a/packages/gatsby-plugin-sharp/src/__tests__/utils.js b/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],
       },
     ]