gatsbyjs · pieh · Dec 6, 2022 · Nov 25, 2022
diff --git a/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js b/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js
@@ -78,7 +78,7 @@ describe(`gatsby-plugin-image`, () => {
     testGatsbyPluginImage(`dominant-color`, hasColorPlaceholder)
   )
   it(`traced`, testConfig, () =>
-    testGatsbyPluginImage(`traced`, hasSVGPlaceholder)
+    testGatsbyPluginImage(`traced`, hasColorPlaceholder)
   )
   it(`blurred`, testConfig, () =>
     testGatsbyPluginImage(`blurred`, hasBase64Placeholder)

diff --git a/e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/english-0.snap.png b/e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/english-0.snap.png
diff --git a/e2e-tests/contentful/snapshots.js b/e2e-tests/contentful/snapshots.js
diff --git a/e2e-tests/contentful/src/pages/gatsby-plugin-image.js b/e2e-tests/contentful/src/pages/gatsby-plugin-image.js
@@ -94,7 +94,9 @@ const GatsbyPluginImagePage = ({ data }) => {
         ))}
       </Grid>
 
-      <h2>gatsby-plugin-image: Traced SVG Placeholder</h2>
+      <h2>
+        gatsby-plugin-image: Traced SVG Placeholder (fallback to DOMINANT_COLOR)
+      </h2>
       <Grid data-cy="traced">
         {data.default.nodes.map(node => (
           <div key={node.title}>

diff --git a/e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js b/e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js
@@ -126,8 +126,9 @@ describe(`remote-file`, () => {
     cy.get(".constrained_traced [data-placeholder-image]")
       .first()
       .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
+        // traced falls back to DOMINANT_COLOR
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
     cy.get(".full [data-placeholder-image]")
       .first()

diff --git a/e2e-tests/development-runtime/cypress/integration/static-image/traced.js b/e2e-tests/development-runtime/cypress/integration/static-image/traced.js
@@ -5,12 +5,14 @@ describe(`fixed`, () => {
     cy.visit(`/static-image/traced`).waitForRouteChange()
   })
 
-  it(`renders a traced svg`, () => {
+  it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
     cy.getTestElement(tracedTestId)
-      .find(`.gatsby-image-wrapper > img`)
-      .should(`have.attr`, `src`)
-      .and(src => {
-        ;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
+      .find(`.gatsby-image-wrapper > [data-placeholder-image]`)
+      .first()
+      .should($el => {
+        // traced falls
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
   })
 

diff --git a/e2e-tests/production-runtime/cypress/integration/remote-file.js b/e2e-tests/production-runtime/cypress/integration/remote-file.js
@@ -1,143 +1,147 @@
 describe(
-  `remote-file`, 
+  `remote-file`,
   {
     retries: {
       runMode: 4,
     },
   },
   () => {
-  beforeEach(() => {
-    cy.visit(`/remote-file/`).waitForRouteChange()
+    beforeEach(() => {
+      cy.visit(`/remote-file/`).waitForRouteChange()
 
-    // trigger intersection observer
-    cy.scrollTo("top")
-    cy.wait(100)
-    cy.scrollTo("bottom", {
-      duration: 500,
-    })
-    cy.wait(500)
-  })
-
-  async function testImages(images, expectations) {
-    for (let i = 0; i < images.length; i++) {
-      const expectation = expectations[i]
-
-      const res = await fetch(images[i].currentSrc, {
-        method: "HEAD",
+      // trigger intersection observer
+      cy.scrollTo("top")
+      cy.wait(100)
+      cy.scrollTo("bottom", {
+        duration: 500,
       })
-      expect(res.ok).to.be.true
-      if (expectation.width) {
-        expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
-          expectation.width
-        )
-      }
-      if (expectation.height) {
-        expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
-          expectation.height
-        )
-      }
-    }
-  }
+      cy.wait(500)
+    })
 
-  it(`should render correct dimensions`, () => {
-    cy.get('[data-testid="public"]').then(async $urls => {
-      const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
+    async function testImages(images, expectations) {
+      for (let i = 0; i < images.length; i++) {
+        const expectation = expectations[i]
 
-      for (const url of urls) {
-        const res = await fetch(url, {
+        const res = await fetch(images[i].currentSrc, {
           method: "HEAD",
         })
         expect(res.ok).to.be.true
+        if (expectation.width) {
+          expect(
+            Math.ceil(images[i].getBoundingClientRect().width)
+          ).to.be.equal(expectation.width)
+        }
+        if (expectation.height) {
+          expect(
+            Math.ceil(images[i].getBoundingClientRect().height)
+          ).to.be.equal(expectation.height)
+        }
       }
-    })
-
-    cy.get(".resize").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 100,
-          height: 133,
-        },
-        {
-          width: 100,
-          height: 160,
-        },
-        {
-          width: 100,
-          height: 67,
-        },
-      ])
-    })
+    }
 
-    cy.get(".fixed").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 100,
-          height: 133,
-        },
-        {
-          width: 100,
-          height: 160,
-        },
-        {
-          width: 100,
-          height: 67,
-        },
-      ])
-    })
+    it(`should render correct dimensions`, () => {
+      cy.get('[data-testid="public"]').then(async $urls => {
+        const urls = Array.from(
+          $urls.map((_, $url) => $url.getAttribute("href"))
+        )
 
-    cy.get(".constrained").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          width: 300,
-          height: 400,
-        },
-        {
-          width: 300,
-          height: 481,
-        },
-        {
-          width: 300,
-          height: 200,
-        },
-      ])
-    })
+        for (const url of urls) {
+          const res = await fetch(url, {
+            method: "HEAD",
+          })
+          expect(res.ok).to.be.true
+        }
+      })
 
-    cy.get(".full").then(async $imgs => {
-      await testImages(Array.from($imgs), [
-        {
-          height: 1229,
-        },
-        {
-          height: 1478,
-        },
-        {
-          height: 614,
-        },
-      ])
-    })
-  })
+      cy.get(".resize").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 100,
+            height: 133,
+          },
+          {
+            width: 100,
+            height: 160,
+          },
+          {
+            width: 100,
+            height: 67,
+          },
+        ])
+      })
 
-  it(`should render a placeholder`, () => {
-    cy.get(".fixed [data-placeholder-image]")
-      .first()
-      .should("have.css", "background-color", "rgb(232, 184, 8)")
-    cy.get(".constrained [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/jpg;base64")
+      cy.get(".fixed").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 100,
+            height: 133,
+          },
+          {
+            width: 100,
+            height: 160,
+          },
+          {
+            width: 100,
+            height: 67,
+          },
+        ])
       })
-    cy.get(".constrained_traced [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("IMG")
-        expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
+
+      cy.get(".constrained").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            width: 300,
+            height: 400,
+          },
+          {
+            width: 300,
+            height: 481,
+          },
+          {
+            width: 300,
+            height: 200,
+          },
+        ])
       })
-    cy.get(".full [data-placeholder-image]")
-      .first()
-      .should($el => {
-        expect($el.prop("tagName")).to.be.equal("DIV")
-        expect($el).to.be.empty
+
+      cy.get(".full").then(async $imgs => {
+        await testImages(Array.from($imgs), [
+          {
+            height: 1229,
+          },
+          {
+            height: 1478,
+          },
+          {
+            height: 614,
+          },
+        ])
       })
-  })
-})
+    })
+
+    it(`should render a placeholder`, () => {
+      cy.get(".fixed [data-placeholder-image]")
+        .first()
+        .should("have.css", "background-color", "rgb(232, 184, 8)")
+      cy.get(".constrained [data-placeholder-image]")
+        .first()
+        .should($el => {
+          expect($el.prop("tagName")).to.be.equal("IMG")
+          expect($el.prop("src")).to.contain("data:image/jpg;base64")
+        })
+      cy.get(".constrained_traced [data-placeholder-image]")
+        .first()
+        .should($el => {
+          // traced falls back to DOMINANT_COLOR
+          expect($el.prop("tagName")).to.be.equal("DIV")
+          expect($el).to.be.empty
+        })
+      cy.get(".full [data-placeholder-image]")
+        .first()
+        .should($el => {
+          expect($el.prop("tagName")).to.be.equal("DIV")
+          expect($el).to.be.empty
+        })
+    })
+  }
+)
diff --git a/e2e-tests/production-runtime/cypress/integration/static-image/traced.js b/e2e-tests/production-runtime/cypress/integration/static-image/traced.js
@@ -5,12 +5,14 @@ describe(`fixed`, () => {
     cy.visit(`/static-image/traced`).waitForRouteChange()
   })
 
-  it(`renders a traced svg`, () => {
+  it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
     cy.getTestElement(tracedTestId)
-      .find(`.gatsby-image-wrapper > img`)
-      .should(`have.attr`, `src`)
-      .and(src => {
-        ;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
+      .find(`.gatsby-image-wrapper > [data-placeholder-image]`)
+      .first()
+      .should($el => {
+        // traced falls
+        expect($el.prop("tagName")).to.be.equal("DIV")
+        expect($el).to.be.empty
       })
   })
 

diff --git a/examples/using-contentful/package.json b/examples/using-contentful/package.json
@@ -30,6 +30,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "build": "gatsby build",
+    "clean": "gatsby clean",
     "start": "gatsby serve"
   }
 }
diff --git a/packages/gatsby-plugin-image/src/resolver-utils.ts b/packages/gatsby-plugin-image/src/resolver-utils.ts
@@ -202,9 +202,9 @@ export function getGatsbyImageFieldConfig<TSource, TContext, TArgs>(
         type: ImagePlaceholderType.name,
         description: stripIndent`
             Format of generated placeholder image, displayed while the main image loads.
-            BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)
-            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.
-            TRACED_SVG: a low-resolution traced SVG of the image.
+            BLURRED: a blurred, low resolution image, encoded as a base64 data URI.
+            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image (default).
+            TRACED_SVG: deprecated. Will use DOMINANT_COLOR.
             NONE: no placeholder. Set the argument "backgroundColor" to use a fixed background color.`,
       },
       formats: {

diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json
@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@gatsbyjs/potrace": "^2.3.0",
     "async": "^3.2.4",
     "bluebird": "^3.7.2",
     "debug": "^4.3.4",
@@ -17,11 +16,9 @@
     "gatsby-core-utils": "^3.24.0",
     "gatsby-plugin-utils": "^3.18.0",
     "lodash": "^4.17.21",
-    "mini-svg-data-uri": "^1.4.4",
     "probe-image-size": "^7.2.3",
     "semver": "^7.3.7",
-    "sharp": "^0.30.7",
-    "svgo": "^2.8.0"
+    "sharp": "^0.30.7"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",