feat(gatsby-image): Placeholder Improvements

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -6,17 +6,17 @@ exports[`<Img /> should render fixed size images 1`] = `
     class="fixedImage gatsby-image-wrapper"
     style="position: relative; overflow: hidden; display: inline; width: 100px; height: 100px;"
   >
+    <div
+      style="width: 100px; opacity: 1; height: 100px;"
+      title="Title for the image"
+    />
     <img
       alt=""
       class="placeholder"
       src="string_of_base64"
       style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
       title="Title for the image"
     />
-    <div
-      style="width: 100px; opacity: 1; height: 100px;"
-      title="Title for the image"
-    />
     <picture>
       <source
         srcset="some srcSetWebp"
@@ -49,17 +49,17 @@ exports[`<Img /> should render fluid images 1`] = `
     <div
       style="width: 100%; padding-bottom: 66.66666666666667%;"
     />
+    <div
+      style="position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px;"
+      title="Title for the image"
+    />
     <img
       alt=""
       class="placeholder"
       src="string_of_base64"
       style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
       title="Title for the image"
     />
-    <div
-      style="position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px;"
-      title="Title for the image"
-    />
     <picture>
       <source
         sizes="(max-width: 600px) 100vw, 600px"

packages/gatsby-image/src/index.js

@@ -235,10 +235,11 @@ class Image extends React.Component {
     const bgColor =
       typeof backgroundColor === `boolean` ? `lightgray` : backgroundColor
 
+    const initialDelay = `0.25s`
     const imagePlaceholderStyle = {
       opacity: this.state.imgLoaded ? 0 : 1,
       transition: `opacity 0.5s`,
-      transitionDelay: this.state.imgLoaded ? `0.5s` : `0.25s`,
+      transitionDelay: this.state.imgLoaded ? `0.5s` : initialDelay,
       ...imgStyle,
       ...placeholderStyle,
     }
@@ -278,16 +279,6 @@ class Image extends React.Component {
             }}
           />
 
-          {/* Show the blurry base64 image. */}
-          {image.base64 && (
-            <Img src={image.base64} {...placeholderImageProps} />
-          )}
-
-          {/* Show the traced SVG image. */}
-          {image.tracedSVG && (
-            <Img src={image.tracedSVG} {...placeholderImageProps} />
-          )}
-
           {/* Show a solid background color. */}
           {bgColor && (
             <Tag
@@ -298,13 +289,23 @@ class Image extends React.Component {
                 top: 0,
                 bottom: 0,
                 opacity: !this.state.imgLoaded ? 1 : 0,
-                transitionDelay: `0.35s`,
+                transitionDelay: initialDelay,
                 right: 0,
                 left: 0,
               }}
             />
           )}
 
+          {/* Show the blurry base64 image. */}
+          {image.base64 && (
+            <Img src={image.base64} {...placeholderImageProps} />
+          )}
+
+          {/* Show the traced SVG image. */}
+          {image.tracedSVG && (
+            <Img src={image.tracedSVG} {...placeholderImageProps} />
+          )}
+
           {/* Once the image is visible (or the browser doesn't support IntersectionObserver), start downloading the image */}
           {this.state.isVisible && (
             <picture>
@@ -365,16 +366,6 @@ class Image extends React.Component {
           ref={this.handleRef}
           key={`fixed-${JSON.stringify(image.srcSet)}`}
         >
-          {/* Show the blurry base64 image. */}
-          {image.base64 && (
-            <Img src={image.base64} {...placeholderImageProps} />
-          )}
-
-          {/* Show the traced SVG image. */}
-          {image.tracedSVG && (
-            <Img src={image.tracedSVG} {...placeholderImageProps} />
-          )}
-
           {/* Show a solid background color. */}
           {bgColor && (
             <Tag
@@ -383,12 +374,22 @@ class Image extends React.Component {
                 backgroundColor: bgColor,
                 width: image.width,
                 opacity: !this.state.imgLoaded ? 1 : 0,
-                transitionDelay: `0.25s`,
+                transitionDelay: initialDelay,
                 height: image.height,
               }}
             />
           )}
 
+          {/* Show the blurry base64 image. */}
+          {image.base64 && (
+            <Img src={image.base64} {...placeholderImageProps} />
+          )}
+
+          {/* Show the traced SVG image. */}
+          {image.tracedSVG && (
+            <Img src={image.tracedSVG} {...placeholderImageProps} />
+          )}
+
           {/* Once the image is visible, start downloading the image */}
           {this.state.isVisible && (
             <picture>

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

@@ -41,6 +41,7 @@ exports.queue = queue
 
 /// Plugin options are loaded onPreInit in gatsby-node
 const pluginDefaults = {
+  forceBase64Format: false,
   useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
   stripMetadata: true,
   lazyImageGeneration: true,
@@ -58,6 +59,7 @@ const generalArgs = {
   duotone: false,
   pathPrefix: ``,
   toFormat: ``,
+  toFormatBase64: ``,
   sizeByPixelDensity: false,
 }
 
@@ -93,6 +95,7 @@ const healOptions = (
   options.pngCompressionLevel = parseInt(options.pngCompressionLevel, 10)
   options.pngCompressionSpeed = parseInt(options.pngCompressionSpeed, 10)
   options.toFormat = options.toFormat.toLowerCase()
+  options.toFormatBase64 = options.toFormatBase64.toLowerCase()
 
   // when toFormat is not set we set it based on fileExtension
   if (options.toFormat === ``) {
@@ -235,9 +238,11 @@ function queueImageResizing({ file, args = {}, reporter }) {
   }
 }
 
+// A value in pixels(Int)
+const defaultBase64Width = () => pluginOptions.base64Width || 20
 async function generateBase64({ file, args, reporter }) {
   const options = healOptions(pluginOptions, args, file.extension, {
-    width: 20,
+    width: defaultBase64Width(),
   })
   let pipeline
   try {
@@ -247,6 +252,12 @@ async function generateBase64({ file, args, reporter }) {
     return null
   }
 
+  const forceBase64Format =
+    args.toFormatBase64 || pluginOptions.forceBase64Format
+  if (forceBase64Format) {
+    args.toFormat = forceBase64Format
+  }
+
   pipeline
     .resize(options.width, options.height, {
       position: options.cropFocus,
@@ -261,6 +272,10 @@ async function generateBase64({ file, args, reporter }) {
       progressive: options.jpegProgressive,
       force: args.toFormat === `jpg`,
     })
+    .webp({
+      quality: options.quality,
+      force: args.toFormat === `webp`,
+    })
 
   // grayscale
   if (options.grayscale) {
@@ -342,9 +357,10 @@ async function fluid({ file, args = {}, reporter, cache }) {
   }
 
   const { width, height, density, format } = metadata
+  const defaultImagePPI = 72 // Standard digital image pixel density
   const pixelRatio =
     options.sizeByPixelDensity && typeof density === `number` && density > 0
-      ? density / 72
+      ? density / defaultImagePPI
       : 1
 
   // if no maxWidth is passed, we need to resize the image based on the passed maxHeight
@@ -446,13 +462,14 @@ async function fluid({ file, args = {}, reporter, cache }) {
 
   let base64Image
   if (options.base64) {
-    const base64Width = 20
+    const base64Width = options.base64Width || defaultBase64Width()
     const base64Height = Math.max(1, Math.round((base64Width * height) / width))
     const base64Args = {
       duotone: options.duotone,
       grayscale: options.grayscale,
       rotate: options.rotate,
       toFormat: options.toFormat,
+      toFormatBase64: options.toFormatBase64,
       width: base64Width,
       height: base64Height,
     }
@@ -566,10 +583,13 @@ async function fixed({ file, args = {}, reporter, cache }) {
   let base64Image
   if (options.base64) {
     const base64Args = {
+      // height is adjusted accordingly with respect to the aspect ratio
+      width: options.base64Width,
       duotone: options.duotone,
       grayscale: options.grayscale,
       rotate: options.rotate,
       toFormat: options.toFormat,
+      toFormatBase64: options.toFormatBase64,
     }
 
     // Get base64 version

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

@@ -115,6 +115,9 @@ const fixedNodeType = ({
       height: {
         type: GraphQLInt,
       },
+      base64Width: {
+        type: GraphQLInt,
+      },
       jpegProgressive: {
         type: GraphQLBoolean,
         defaultValue: true,
@@ -142,6 +145,10 @@ const fixedNodeType = ({
         type: ImageFormatType,
         defaultValue: ``,
       },
+      toFormatBase64: {
+        type: ImageFormatType,
+        defaultValue: ``,
+      },
       cropFocus: {
         type: ImageCropFocusType,
         defaultValue: sharp.strategy.attention,
@@ -240,6 +247,9 @@ const fluidNodeType = ({
       maxHeight: {
         type: GraphQLInt,
       },
+      base64Width: {
+        type: GraphQLInt,
+      },
       grayscale: {
         type: GraphQLBoolean,
         defaultValue: false,
@@ -267,6 +277,10 @@ const fluidNodeType = ({
         type: ImageFormatType,
         defaultValue: ``,
       },
+      toFormatBase64: {
+        type: ImageFormatType,
+        defaultValue: ``,
+      },
       cropFocus: {
         type: ImageCropFocusType,
         defaultValue: sharp.strategy.attention,