[gatsby-plugin-sharp] SVG traced placeholders

examples/image-processing/src/pages/index.js

@@ -306,14 +306,19 @@ export const pageQuery = graphql`
     sizes: imageSharp(id: { regex: "/fecolormatrix-kanye-west.jpg/" }) {
       sizes(
         duotone: { highlight: "#f00e2e", shadow: "#192550" }
+        traceSVG: {
+          color: "#f00e2e"
+          turnPolicy: TURNPOLICY_MINORITY
+          blackOnWhite: false
+        }
         toFormat: PNG
       ) {
-        ...GatsbyImageSharpSizes
+        ...GatsbyImageSharpSizes_tracedSVG
       }
     }
     resolution: imageSharp(id: { regex: "/lol.jpg/" }) {
       resolutions(grayscale: true, width: 500) {
-        ...GatsbyImageSharpResolutions
+        ...GatsbyImageSharpResolutions_tracedSVG
       }
     }
     cropDefault: imageSharp(id: { regex: "/gatsby.jpg/" }) {

examples/using-gatsby-image/src/pages/index.js

@@ -58,6 +58,9 @@ class IndexComponent extends React.Component {
             <li>
               <Link to="/background-color/">Background color</Link>
             </li>
+            <li>
+              <Link to="/traced-svg/">Traced SVG</Link>
+            </li>
           </ul>
           <h2>Out of the box it:</h2>
           <ul>
@@ -73,6 +76,9 @@ class IndexComponent extends React.Component {
               Uses the "blur-up" effect i.e. it loads a tiny version of the
               image to show while the full image is loading
             </li>
+            <li>
+              Alternatively provides a "traced placeholder" SVG of the image.
+            </li>
             <li>
               Lazy loads images which reduces bandwidth and speeds the initial
               load time

examples/using-gatsby-image/src/pages/traced-svg.js

@@ -0,0 +1,117 @@
+import React from "react"
+import Img from "gatsby-image"
+
+import { rhythm, options } from "../utils/typography"
+
+const TracedSVG = ({ data }) => (
+  <div>
+    <h1>Viribus quid</h1>
+    <h2>Hippason sinu</h2>
+    <Img
+      style={{ display: `inherit` }}
+      css={{
+        marginBottom: rhythm(options.blockMarginBottom),
+        marginLeft: rhythm(options.blockMarginBottom),
+        float: `right`,
+        "&": {
+          "@media (min-width: 500px)": {
+            display: `none`,
+          },
+        },
+      }}
+      title={`Photo by Redd Angelo on Unsplash`}
+      resolutions={data.reddImageMobile.resolutions}
+    />
+    <Img
+      style={{ display: `inherit` }}
+      css={{
+        marginBottom: rhythm(options.blockMarginBottom),
+        marginLeft: rhythm(options.blockMarginBottom),
+        float: `right`,
+        display: `none`,
+        "@media (min-width: 500px)": {
+          display: `inline-block`,
+        },
+      }}
+      title={`Photo by Redd Angelo on Unsplash`}
+      resolutions={data.reddImage.resolutions}
+    />
+    <p>
+      Lorem markdownum nocens, est aut tergo, inmansuetique bella. Neve illud
+      contrarius ad es prior.{` `}
+      <a href="http://nunc.io/fuit.html">Planguntur</a> quondam, sua ferunt
+      uterum semina advertere si fraudesque terram hosti subiecta, nec. Audenti
+      refugitque manibusque aliis infelicem sed mihi aevis! Que ipso templa; tua
+      triformis animumque ad coluit in aliquid.
+    </p>
+    <ul>
+      <li>Infamia lumina sequuntur ulla</li>
+      <li>Aquarum rutilos</li>
+      <li>Hinc vimque</li>
+    </ul>
+    <h2>Et solebat pectus fletus erat furit officium</h2>
+    <p>
+      Proteus ut dis nec exsecrantia data: agrestes, truculenta Peleus. Et
+      diffidunt, talia intravit Thaumantias; figere et <em>et</em> qui socio
+      qui, <a href="http://vixmonet.io/in.html">tuo servet unda</a> hoc{` `}
+      <strong>classi</strong>? Causam <em>quemque</em>? Subigebant cornibus
+      fibras ut per nare nati, cunctis et <strong>illa verba</strong> inrita.
+    </p>
+    <ol>
+      <li>Furori adacto</li>
+      <li>Nocent imagine precari id ante sic</li>
+      <li>Ipsos sine Iuno placabitis silet relinquent blandarum</li>
+      <li>Et pars tabe sociorum et luna illum</li>
+      <li>Et frustra pestifero et inquit cornua victa</li>
+      <li>Constitit nomine senta suspirat et signis genuisse</li>
+    </ol>
+    <Img
+      sizes={data.kenImage.sizes}
+      title={`Photo by Ken Treloar on Unsplash`}
+    />
+    <h2>Levia mihi</h2>
+    <p>
+      Precor Ortygiam, prudens diro stabant prodis moenia; aut tergo{` `}
+      <a href="http://orehaec.io/">loquax et data</a> sua rite in vulnere. Esse
+      lumina plaustrum lacus necopina, iam umbrae nec clipeo sentit{` `}
+      <a href="http://ut.org/hinc">sinistra</a>.
+    </p>
+    <p>
+      Pendebat nitidum vidistis ecce crematisregia fera et lucemque crines.{` `}
+      <a href="http://www.sub.net/">Est sopita satis</a> quod harena
+      Antimachumque tulit fusile. Fieri qui que prosit equidem, meis praescia
+      monebat cacumina tergo acerbo saepe nullaque.
+    </p>
+  </div>
+)
+
+export default TracedSVG
+
+export const query = graphql`
+  query TracedSVGQuery {
+    reddImageMobile: imageSharp(id: { regex: "/redd/" }) {
+      resolutions(width: 125) {
+        ...GatsbyImageSharpResolutions_tracedSVG
+      }
+    }
+    reddImage: imageSharp(id: { regex: "/redd/" }) {
+      resolutions(width: 200) {
+        ...GatsbyImageSharpResolutions_tracedSVG
+      }
+    }
+    kenImage: imageSharp(id: { regex: "/ken-treloar/" }) {
+      sizes(
+        maxWidth: 600
+        traceSVG: {
+          turnPolicy: TURNPOLICY_MINORITY
+          blackOnWhite: true
+          turdSize: 100
+          threshold: 100
+          optTolerance: 1000
+        }
+      ) {
+        ...GatsbyImageSharpSizes_tracedSVG
+      }
+    }
+  }
+`

packages/gatsby-image/README.md

@@ -16,7 +16,7 @@ But creating optimized images for websites has long been a thorny problem. Ideal
 * Generate multiple smaller images so smartphones and tablets don't download desktop-sized images
 * Strip all unnecessary metadata and optimize JPEG and PNG compression
 * Efficiently lazy load images to speed initial page load and save bandwidth
-* Use the "blur-up" technique to show a preview of the image while it loads
+* Use the "blur-up" technique or a "[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)" SVG to show a preview of the image while it loads
 * Hold the image position so your page doesn't jump while images load
 
 Doing this consistantly across a site feels like sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images.
@@ -94,8 +94,10 @@ Their fragments are:
 
 * `GatsbyImageSharpResolutions`
 * `GatsbyImageSharpResolutions_noBase64`
+* `GatsbyImageSharpResolutions_tracedSVG`
 * `GatsbyImageSharpSizes`
 * `GatsbyImageSharpSizes_noBase64`
+* `GatsbyImageSharpSizes_tracedSVG`
 
 ### gatsby-source-contentful
 
@@ -104,7 +106,9 @@ Their fragments are:
 * `GatsbyContentfulSizes`
 * `GatsbyContentfulSizes_noBase64`
 
-If you don't want to use the blur-up effect, choose the fragment with `noBase64` at the end.
+If you don't want to use the blur-up effect, choose the fragment with `noBase64` at the end. If you want to use the traced placeholder SVGs, choose the fragment with `tracedSVG` at the end.
+
+_Please see the [gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/#tracedsvg) documentation for more information on `tracedSVG` and its configuration options._
 
 ## "Resolutions" queries
 
@@ -120,7 +124,7 @@ Pass in the data returned from the `resolutions` object in your query via the `r
     # Other options include height (set both width and height to crop),
     # grayscale, duotone, rotate, etc.
     resolutions(width: 400) {
-      # Choose either the fragment including a small base64ed image or one without.
+      # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
       ...GatsbyImageSharpResolutions
     }
   }
@@ -143,7 +147,7 @@ Pass in the data returned from the `sizes` object in your query via the `sizes`
     # Other options include maxHeight (set both maxWidth and maxHeight to crop),
     # grayscale, duotone, rotate, etc.
     sizes(maxWidth: 700) {
-      # Choose either the fragment including a small base64ed image or one without.
+      # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
       ...GatsbyImageSharpSizes_noBase64
     }
   }

packages/gatsby-image/src/index.js

@@ -193,6 +193,17 @@ class Image extends React.Component {
               />
             )}
 
+            {/* Show the traced SVG image. */}
+            {image.tracedSVG && (
+              <Img
+                alt={alt}
+                title={title}
+                src={image.tracedSVG}
+                opacity={!this.state.imgLoaded ? 1 : 0}
+                transitionDelay={`0.25s`}
+              />
+            )}
+
             {/* Show a solid background color. */}
             {bgColor && (
               <div
@@ -271,6 +282,17 @@ class Image extends React.Component {
               />
             )}
 
+            {/* Show the traced SVG image. */}
+            {image.tracedSVG && (
+              <Img
+                alt={alt}
+                title={title}
+                src={image.tracedSVG}
+                opacity={!this.state.imgLoaded ? 1 : 0}
+                transitionDelay={`0.25s`}
+              />
+            )}
+
             {/* Show a solid background color. */}
             {bgColor && (
               <div

packages/gatsby-plugin-sharp/README.md

@@ -163,6 +163,46 @@ the source image colors will be converted to match a gradient color chosen based
 on each pixel's [relative luminance][4].  
 Logic is borrowed from [react-duotone][5].
 
+#### tracedSVG
+
+Generates a traced SVG of the image (see [the original GitHub issue][9]) and
+returns the SVG as "[optimized URL-encoded][10]" `data:` URI.
+It it used in [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/) to
+provide an alternative to the default inline base64 placeholder image.
+
+Uses [node-potrace][11] and [SVGO][12] under the hood.
+Default settings for node-potrace:
+
+```javascript
+  {
+    color: `lightgray`,
+    optTolerance: 0.4,
+    turdSize: 100,
+    turnPolicy: TURNPOLICY_MAJORITY,
+  }
+```
+
+All [node-potrace `Potrace` parameters][13] are exposed and can be set via the
+`traceSVG` argument:
+
+```javascript
+responsiveResolution(
+  traceSVG: {
+    color: "#f00e2e"
+    turnPolicy: TURNPOLICY_MINORITY
+    blackOnWhite: false
+  }
+) {
+  src
+  srcSet
+  tracedSVG
+}
+```
+
+Heads up: `tracedSVG` currently traces the _original_ image source. Depending
+on source image size and settings, please make sure that the generated SVG
+is of reasonable size, especially when using it as a placeholder.
+
 [1]: https://alistapart.com/article/finessing-fecolormatrix
 [2]: http://blog.72lions.com/blog/2015/7/7/duotone-in-js
 [3]: https://ines.io/blog/dynamic-duotone-svg-jade
@@ -171,3 +211,9 @@ Logic is borrowed from [react-duotone][5].
 [6]: http://sharp.dimens.io/en/stable/api-resize/#crop
 [7]: http://sharp.dimens.io/en/stable/api-operation/#rotate
 [8]: http://sharp.dimens.io/en/stable/api-colour/#greyscale
+[9]: https://github.com/gatsbyjs/gatsby/issues/2435
+[10]: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
+[11]: https://github.com/tooolbox/node-potrace
+[12]: https://github.com/svg/svgo
+[13]: https://github.com/tooolbox/node-potrace#parameters
+[14]: https://github.com/oliver-moran/jimp

packages/gatsby-plugin-sharp/package.json

@@ -11,8 +11,10 @@
     "imagemin": "^5.2.2",
     "imagemin-pngquant": "^5.0.0",
     "lodash": "^4.17.4",
+    "potrace": "^2.1.1",
     "progress": "^1.1.8",
-    "sharp": "^0.17.3"
+    "sharp": "^0.17.3",
+    "svgo": "^0.7.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",