feat(gatsby-plugin-sharp): Add support for pngquant speed option (#9563)

This adds a `pngCompressionSpeed` option to image queries, which is passed through to pngquant as the `speed` option. In most cases this shouldn't be used, but in some cases with large numbers of PNGs this can make a significant difference in build times.

As explained in [imagemin-pngquant](https://github.com/imagemin/imagemin-pngquant#imageminpngquantoptionsinput); _"Speed 10 has 5% lower quality, but is 8 times faster than the default."_

[Contrary to the docs](kornelski/pngquant#313) in pngquant and imagemin-pngquant, the default seems to be 0, not 3. I initially defaulted to 3, but the snapshots broke, which is how I saw that the docs were wrong.

Author: ascorbic

packages/gatsby-plugin-sharp/README.md

@@ -12,7 +12,11 @@ image formats.
 For JPEGs it generates progressive images with a default quality level of 50.
 
 For PNGs it uses [pngquant](https://github.com/pornel/pngquant) to compress
-images. By default it uses a quality setting of [50-75].
+images. By default it uses a quality setting of [50-75]. The `pngCompressionSpeed`
+value is 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). In most
+cases you should stick with the default, but if you have very large numbers
+of PNGs then it can significantly reduce build times.
 
 ## Install
 
@@ -118,6 +122,7 @@ following:
 - `duotone` (bool|obj, default: false)
 - `toFormat` (string, default: '')
 - `cropFocus` (string, default: '[sharp.strategy.attention][6]')
+- `pngCompressionSpeed` (int, default: 4)
 
 #### toFormat
 

packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap

@@ -15,14 +15,14 @@ Object {
   "aspectRatio": 2.0661764705882355,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABAklEQVQoz61R7WrCQBDM+7+Cv1qhlIogoUWMoH8KrfgOLVXRKDV4d7kkl6/pbsxpqBIo9mBuZ7N3k51bB7TKsrwZVsexyS2rKerwFhYFVI1DnkMQOHIuCaLB+ayuwXlMaApXgvMoxjTU8MIQE4rMx8SnNffUkU/qM/bbiPAeRfgw5n8tB+QgO1kmUvwROdm0kYHmUNoe+NoU2wZTdVjQH7Isg9YRpFIXor8vpGmKjb/FQQgslit8fi3wvQ/OHXLhxRvDHY7Qd5+x3e2udmNzTUN4fZvhoddH566L+8cn9AZuVcvpLR3e9kEAISWEkDAmbRXkGCcJ1r4PRRNPEkPu9Kn2Azs0CqJYU3JKAAAAAElFTkSuQmCC",
   "density": 144,
-  "originalImg": "/static/1234/e2565/test.png",
+  "originalImg": "/static/1234/a3030/test.png",
   "originalName": undefined,
   "presentationHeight": 68,
   "presentationWidth": 141,
   "sizes": "(max-width: 141px) 100vw, 141px",
-  "src": "/static/1234/e2565/test.png",
-  "srcSet": "/static/1234/0b382/test.png 200w,
-/static/1234/e2565/test.png 281w",
+  "src": "/static/1234/a3030/test.png",
+  "srcSet": "/static/1234/56b42/test.png 200w,
+/static/1234/a3030/test.png 281w",
   "srcSetType": "image/png",
 }
 `;
@@ -32,14 +32,14 @@ Object {
   "aspectRatio": 2.0661764705882355,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABAklEQVQoz61R7WrCQBDM+7+Cv1qhlIogoUWMoH8KrfgOLVXRKDV4d7kkl6/pbsxpqBIo9mBuZ7N3k51bB7TKsrwZVsexyS2rKerwFhYFVI1DnkMQOHIuCaLB+ayuwXlMaApXgvMoxjTU8MIQE4rMx8SnNffUkU/qM/bbiPAeRfgw5n8tB+QgO1kmUvwROdm0kYHmUNoe+NoU2wZTdVjQH7Isg9YRpFIXor8vpGmKjb/FQQgslit8fi3wvQ/OHXLhxRvDHY7Qd5+x3e2udmNzTUN4fZvhoddH566L+8cn9AZuVcvpLR3e9kEAISWEkDAmbRXkGCcJ1r4PRRNPEkPu9Kn2Azs0CqJYU3JKAAAAAElFTkSuQmCC",
   "density": 144,
-  "originalImg": "/static/1234/76aa7/test.png",
+  "originalImg": "/static/1234/67b29/test.png",
   "originalName": undefined,
   "presentationHeight": 136,
   "presentationWidth": 281,
   "sizes": "(max-width: 281px) 100vw, 281px",
-  "src": "/static/1234/76aa7/test.png",
-  "srcSet": "/static/1234/304a5/test.png 200w,
-/static/1234/76aa7/test.png 281w",
+  "src": "/static/1234/67b29/test.png",
+  "srcSet": "/static/1234/4df82/test.png 200w,
+/static/1234/67b29/test.png 281w",
   "srcSetType": "image/png",
 }
 `;
@@ -49,13 +49,13 @@ Object {
   "aspectRatio": 1,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVQ4y2P4TwFgGNU8qnlU86jmgdUMAOBEq42KgAyMAAAAAElFTkSuQmCC",
   "density": 72,
-  "originalImg": "/static/1234/7bb67/test.png",
+  "originalImg": "/static/1234/4ce1a/test.png",
   "originalName": undefined,
   "presentationHeight": 1,
   "presentationWidth": 1,
   "sizes": "(max-width: 1px) 100vw, 1px",
-  "src": "/static/1234/7bb67/test.png",
-  "srcSet": "/static/1234/7bb67/test.png 1w",
+  "src": "/static/1234/4ce1a/test.png",
+  "srcSet": "/static/1234/4ce1a/test.png 1w",
   "srcSetType": "image/png",
 }
 `;

packages/gatsby-plugin-sharp/src/index.js

@@ -85,6 +85,8 @@ const generalArgs = {
   quality: 50,
   jpegProgressive: true,
   pngCompressionLevel: 9,
+  // default is 4 (https://github.com/kornelski/pngquant/blob/4219956d5e080be7905b5581314d913d20896934/rust/bin.rs#L61)
+  pngCompressionSpeed: 4,
   base64: false,
   grayscale: false,
   duotone: false,
@@ -97,6 +99,7 @@ const healOptions = (args, defaultArgs) => {
   let options = _.defaults({}, args, defaultArgs, generalArgs)
   options.quality = parseInt(options.quality, 10)
   options.pngCompressionLevel = parseInt(options.pngCompressionLevel, 10)
+  options.pngCompressionSpeed = parseInt(options.pngCompressionSpeed, 10)
   options.toFormat = options.toFormat.toLowerCase()
 
   // only set width to 400 if neither width nor height is passed
@@ -230,7 +233,6 @@ const processFile = (file, jobs, cb, reporter) => {
         job.outsideResolve()
       }
     }
-
     if (
       (job.file.extension === `png` && args.toFormat === ``) ||
       args.toFormat === `png`
@@ -245,7 +247,10 @@ const processFile = (file, jobs, cb, reporter) => {
                   quality: `${args.quality}-${Math.min(
                     args.quality + 25,
                     100
-                  )}`, // e.g. 40-65
+                  )}`,
+                  speed: args.pngCompressionSpeed
+                    ? args.pngCompressionSpeed
+                    : undefined,
                   strip: !!pluginOptions.stripMetadata, // Must be a bool
                 }),
               ],
@@ -554,7 +559,6 @@ async function base64(arg) {
 
 async function fluid({ file, args = {}, reporter, cache }) {
   const options = healOptions(args, {})
-
   // Account for images with a high pixel density. We assume that these types of
   // images are intended to be displayed at their native resolution.
   let metadata

packages/gatsby-transformer-sharp/src/extend-node-type.js

@@ -21,6 +21,8 @@ const fsExtra = require(`fs-extra`)
 const imageSize = require(`probe-image-size`)
 const path = require(`path`)
 
+const DEFAULT_PNG_COMPRESSION_SPEED = 4
+
 const {
   ImageFormatType,
   ImageCropFocusType,
@@ -117,6 +119,10 @@ const fixedNodeType = ({
         type: GraphQLBoolean,
         defaultValue: true,
       },
+      pngCompressionSpeed: {
+        type: GraphQLInt,
+        defaultValue: DEFAULT_PNG_COMPRESSION_SPEED,
+      },
       grayscale: {
         type: GraphQLBoolean,
         defaultValue: false,
@@ -243,6 +249,10 @@ const fluidNodeType = ({
         type: GraphQLBoolean,
         defaultValue: true,
       },
+      pngCompressionSpeed: {
+        type: GraphQLInt,
+        defaultValue: DEFAULT_PNG_COMPRESSION_SPEED,
+      },
       duotone: {
         type: DuotoneGradientType,
         defaultValue: false,
@@ -413,6 +423,10 @@ module.exports = ({
           type: GraphQLInt,
           defaultValue: 9,
         },
+        pngCompressionSpeed: {
+          type: GraphQLInt,
+          defaultValue: DEFAULT_PNG_COMPRESSION_SPEED,
+        },
         grayscale: {
           type: GraphQLBoolean,
           defaultValue: false,