How to prevent Gatsby image from blurring a logo with every reload?

Question

I've read through the gatsby-image docs but can't figure out how to turn something off. By default, it seems gatsby-image loads a thumbnail of an image, then loads the image progressively. Basically a nice placeholder effect. But I find that my logo keeps blurring everytime I change pages. Here's my code:

 <StaticQuery
            query={graphql`
              query {
                file(relativePath: { eq: "appendto_logo.png" }) {
                  childImageSharp {
                    # Specify the image processing specifications right in the query.
                    # Makes it trivial to update as your page's design changes.
                    fixed(width: 150) {
                      ...GatsbyImageSharpFixed
                    }
                  }
                }
              }
            `}
            render={data => <Img fixed={data.file.childImageSharp.fixed} />}
          />

Any thoughts? How to prevent that blurring effect? Or the thumbnail loading effect...

Answer 1

Switching to GatsbyImageSharpFixed_noBase64 solved it (instead of just ...GatsbyImageSharpFixed)