fix(gatsby-plugin-image): Add outputPixelDensities to `SHARP_ATTRIB…

…UTES` (#36203)

Co-authored-by: Ward Peeters <[email protected]>
Co-authored-by: LekoArts <[email protected]>

e2e-tests/visual-regression/cypress/integration/image.js

@@ -48,5 +48,19 @@ describe(`StaticImage`, () => {
         })
       })
     })
+    describe(`sharp props`, () => {
+      it(`respects outputPixelDensities on ${size.join("x")}`, () => {
+        cy.viewport(...size)
+        cy.visit("/static-images/sharp-props")
+        // Wait for main image to load
+        cy.get("[data-main-image]").should("exist")
+        // Check srcset for 1x, 2x, 3x
+        cy.get("[data-main-image]").then(img => {
+          expect(img[0].attributes.srcset.value).to.contain(`300w`)
+          expect(img[0].attributes.srcset.value).to.contain(`600w`)
+          expect(img[0].attributes.srcset.value).to.contain(`900w`)
+        })
+      })
+    })
   })
 })

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

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { StaticImage } from "gatsby-plugin-image"
+import { TestWrapper } from "../../components/test-wrapper"
+import Layout from "../../components/layout"
+
+const Page = () => {
+  return (
+    <Layout>
+      <h1>Defining sharp props</h1>
+      <TestWrapper>
+        <StaticImage
+          src="../../images/cornwall.jpg"
+          loading="eager"
+          width={300}
+          alt="cornwall"
+          layout="fixed"
+          outputPixelDensities={[1, 2, 3]}
+        />
+      </TestWrapper>
+    </Layout>
+  )
+}
+
+export default Page

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

@@ -23,6 +23,7 @@ export const SHARP_ATTRIBUTES = new Set([
   `sizes`,
   `backgroundColor`,
   `breakpoints`,
+  `outputPixelDensities`,
 ])
 
 export function normalizeProps(

packages/gatsby-plugin-image/src/components/static-image.server.tsx

@@ -41,6 +41,8 @@ export function _getStaticImage(
     webpOptions,
     avifOptions,
     blurredOptions,
+    breakpoints,
+    outputPixelDensities,
     /* eslint-enable @typescript-eslint/no-unused-vars */
     ...props
   }): ReactElement {

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

@@ -50,6 +50,7 @@ export interface ISharpGatsbyImageArgs {
   avifOptions?: Record<string, unknown>
   blurredOptions?: { width?: number; toFormat?: ImageFormat }
   breakpoints?: Array<number>
+  outputPixelDensities?: Array<number>
   backgroundColor?: string
 }