Traced SVG Images For Excellent UX with Gatsby.js

I want to show you a sweet image technique to improve the user experience on your site that’s probably more trouble than its worth without the right tools.

1. Create a traced SVG version of your image
2. Render that first with HTML
3. Apply a little CSS to help sell it
4. When the image loads, replace the SVG with the high res image

Gatsby makes this really easy. Feel free to just read this article, or pop open your command prompt and follow along.

First, install gatsby and create your site:

yarn global add gatsby-cli
gatsby new my-site
cd my-site
yarn start

Now visit localhost:8000, you should see the Gatsby starter site.

Next add the dependencies we need:

# ctrl+c to stop the server
yarn add gatsby-plugin-sharp \
  gatsby-source-filesystem \
  gatsby-transformer-sharp

Gatsby Source Filesystem lets us query the files in our project with GraphQL, Gatsby Transformer Sharp lets us transform those files in our queries with Sharp Image Processing, and Gatsby Plugin Sharp is just a dependency of Gatsby Transformer Sharp.

Wait, what do you mean query the file system with GraphQL?

Check it out, go visit http://localhost:8000/__graphql and plug this query in:

{
  allFile {
    edges {
      node {
        id
      }
    }
  }
}

Try this one:

{
  allFile {
    edges {
      node {
        id
        size
        extension
      }
    }
  }
}

Pretty cool! Now if you put this image of New York at src/newyork.jpg, you can now use a query to transform the image to its JPG source and a traced SVG:

{
  nyc: imageSharp(id: {regex: "/newyork.jpg/"}) {
    sizes(
      quality: 100,
      traceSVG: {
        color: "rgb(56, 47, 92)",
        threshold: 75
      },
      toFormat: JPG
    ) {
      tracedSVG
      src
    }
  }
}

Check out that data URI for the traced SVG! Now we can use that query on our index page by adding this to src/pages/index.js:

export const query = graphql`
  query IndexQuery {
    nyc: imageSharp(id: { regex: "/newyork.jpg/" }) {
      sizes(
        quality: 100
        traceSVG: { color: "rgb(56, 47, 92)", threshold: 75 }
        toFormat: JPG
      ) {
        tracedSVG
        src
      }
    }
  }
`

But for completeness, here’s a Gist of the entire src/pages/index.js file:

Now for some fun, build the site and visit it in Chrome with network throttling on to see what its like for visitors with slow connections.

yarn global add http-server
yarn build
cd public
http-server

Open up localhost:8080, then open the chrome dev tools and turn on network throttling under the Network tab. Now reload and see the experience for somebody on a slow network.

Or you can just visit the demo site right here.

Gatsby makes hard stuff easy, and I love it. If you build websites, you should give Gatsby a shot.

You should also sign up for one of the Gatsby workshops that Kyle Mathews, the creator of Gatsby, is giving in San Francisco and New York, use these links for 10% off :)

April 12th-13th, 2018 in San Francisco

May 3rd-4th, 2018 in New York City