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

gatsby-image not showing
gatsby-image svg
gatsby-image gallery
gatsby image resolver
gatsby image float
gatsby-image typescript
gatsby generating image thumbnails
gatsby-image padding bottom

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...


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

Using Gatsby Image to Prevent Image Bloat, Using images in Gatsby components and pages requires four steps to take Use the “blur-up” technique or a “traced placeholder” SVG to show a a lot of manual labor and bookkeeping to ensure every image is optimized. logo. Video hosted on egghead.io. Write a GraphQL query using one of the  The gatsby-image component automatically enables a blur-up effect as well as lazy loading images that are not currently on screen. So this is all very nice and it’s far better to be able to use this from npm vs. implementing it yourself or cobbling together several standalone libraries.


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

gatsby-image, The blurred up base64 image is shown every time. feat(gatsby-image): Enhanced Blur-up CSS for placeholderImage #10702 Placeholder can briefly be seen, could use CSS Keyframes to avoid? with that base64 placeholder, so it will be present still on a refresh, even if your cache has the full image. I am using gatsby-plugin-mdx along with gatsby-remark-images to incorporate images in MDX for blogging and it is supposed to have the blur up effects which come with Gatsby Image by default Here i


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

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

If gatsby-image already has an item in cache, don't show the , This happens on the first time image is shown, if user navigates to another page Is there a way to disable the blurup effect? run gatsby build && gatsby serve; Check public/static folder for logo.png The first time works fine and every time after that the blur stays there. Reload to refresh your session. Build and Serve Locally (works, image blurs in) run gatsby build && gatsby serve; Check public/static folder for logo.png; Check on the local production build to make sure it works; Build and Test on gh-pages (doesn't work, image stuck on blur) npm run build:gh runs rm -rf public gatsby build --prefix-paths and gh-pages -d public


BlurUp effect gets stuck on · Issue #4926 · gatsbyjs/gatsby · GitHub, I love the fact that they hold their positions and load in with a blur effect. But, I don'​t get the best way to display them or even how to at times I use  * gatsby-plugin-sharp: Remove warning for resolutions when requested width and image width are equal * Add to instructions that you need gatsby-plugin-sharp fixes #3545 * Update katex package to 0.8.3 * add unique titles to docs, tutorial, blog * Fix typo in KaTeX usage example * format * Publish - gatsby-plugin-netlify@1.0.14 - gatsby-plugin


Struggling with Gatsby Images - DEV, gatsby-plugin-sharp Exposes several image processing functions built on the if you have very large numbers of PNGs then it can significantly reduce build times. 1200px, 1600px – enough to provide close to the optimal image size for every a base64 image to use as a placeholder) you need to implement the “blur up”  Using Gatsby Image. Blur Up; Background Color; Traced SVG; WebP; Docs; gatsby-image is the official Image component for use in building Gatsby websites. It provides the fastest, most optimized image loading performance possible for Gatsby (and other React) websites.


Gatsby.js - A powerful Static Site Generator, Learn about all the benefits of using Gatsby.js with React Learning both frameworks in one step will blur the lines between React and Gatsby. pages, and prevents a browser refresh when navigating from page to page. This starts by having access to images and markdown via GraphQL, but also by  Part of what makes Gatsby sites so fast is its recommended approach to handling images. gatsby-image is a React component designed to work seamlessly with Gatsby’s native image processing capabilities powered by GraphQL and gatsby-plugin-sharp to easily and completely optimize image loading for your sites.