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)

Answer 2

Update

critical is now deprecated in favor of loading:

 - <Img critical fixed={ ... } />
 + <Img loading="eager" fixed={ ... } />

Also use _noBase64 sharp fragments to completely remove the blur effect, as @epsilon42's comment & Kyle's answer suggested.

And finally, to persist a component (navigation bar, etc.) between page load, you can wrap the pages in a layout with that component.

---

Original answer

I think you can pass in a critical prop to Gatsby Image, like this: <Img critical fixed={ ... }> It will always load the image immediately. You might want to add fadeIn in there as well:

Images marked as critical will start loading immediately as the DOM is parsed, but unless fadeIn is set to false, the transition from placeholder to final image will not occur until after the component is mounted.

Gatsby Image docs

Answer 3

To avoid the blurring effect you could just hide the placeholder using the placeholderStyle attribute:

<Img fixed={data.logoImage.childImageSharp.fixed} placeholderStyle={{ visibility: "hidden" }}/>