feat: trade 5% image quality for 8x image processing speed (#659)

* feat: trade 5% image quality for 8x image processing speed

* fix: keep default pngCompSpeed

* chore: add clean build command

* chore: add comment

package.json

@@ -16,6 +16,7 @@
     "dev": "yarn workspace example develop",
     "dev:clean": "yarn workspace example develop:clean",
     "build": "yarn workspace example build",
+    "build:clean": "yarn workspace example build:clean",
     "serve": "yarn build && yarn workspace example serve",
     "test:prefix": "yarn workspace example test:prefix",
     "now-build": "yarn workspace example build",

packages/example/package.json

@@ -7,6 +7,7 @@
     "develop": "gatsby develop -H 0.0.0.0",
     "develop:clean": "yarn clean && yarn develop",
     "build": "gatsby build",
+    "build:clean": "yarn clean && gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "build:prefix": "gatsby build --prefix-paths",

packages/example/src/pages/guides/configuration.mdx

@@ -177,6 +177,7 @@ plugins: [
 
 - `additionalFontWeights` – add support for additional Plex font weights. Don’t forget to specify italics for the additional weights if needed.
 - `mdxExtensions` – change the file extensions processed by `gatsby-mdx` (default ['.mdx', '.md']).
+- `pngCompressionSpeed` - a speed/quality trade-off from 1 (brute-force) to 10 (fastest). Speed 10 has 5% lower quality, but is 8 times faster than the default (4).
 - `titleType` – pick between four formats for the `<title>` element for your site. Here are the four options using this page as an example:
 
   - `page`: "Configuration" (default)

packages/gatsby-theme-carbon/gatsby-config.js

@@ -17,6 +17,7 @@ module.exports = themeOptions => {
     imageQuality = 75,
     lunrOptions = defaultLunrOptions,
     repository,
+    pngCompressionSpeed = 4, // default for gatsby-plugin-sharp
     mediumAccount = 'carbondesign',
     gatsbyRemarkPlugins = [],
   } = themeOptions;
@@ -31,6 +32,7 @@ module.exports = themeOptions => {
         linkImagesToOriginal: false,
         quality: imageQuality,
         withWebp,
+        pngCompressionSpeed,
       },
     },
     { resolve: `gatsby-remark-responsive-iframe` },
@@ -70,7 +72,6 @@ module.exports = themeOptions => {
             ...defaultRemarkPlugins,
             ...gatsbyRemarkPlugins,
           ],
-          plugins: ['gatsby-remark-images'],
           defaultLayouts: {
             default: require.resolve('./src/templates/Default.js'),
             home: require.resolve('./src/templates/Homepage.js'),