gatsby: [gatsby-plugin-image]: loading=eager causes blurred image in production mode, sharpens after page interaction

Description

The logo image on my website is remaining blurred in production after page load and sharpens after page interaction. This does not occur for any other images that I can see, however I have reproduced it on one other site I manage as well.

• Does not occur in Safari/FF
• Does occur in Chrome/Edge (Chromium)
• Does not occur with a cold cache, e.g. incognito mode

The website is using a number of interloocking themes and the logo is contained is nested in a Layout component so it is rendered on each page. The query for the logo itself is happening in the “core” theme in the useSiteMetadata hook. The query is a bit atypical as it looks for a unique name “catalyst-site-logo” which was a decision I made long ago and a piece of technical debt. Here is what that query looks like:

logo: file(name: { eq: "catalyst-site-logo" }) {
          childImageSharp {
            gatsbyImageData(
              height: 300
              layout: CONSTRAINED
              placeholder: BLURRED
            )
          }
        }

Relevant file: https://github.com/ehowey/gatsby-theme-catalyst/blob/main/themes/gatsby-theme-catalyst-core/src/utils/use-site-metadata.js

The logo is then displayed in the branding component which is actually contained in the site which consumes the theme, in this case my own site. Here is what that looks like:

<Link
        to="/"
        onClick={() => setIsNavOpen(false)}
        sx={{ textDecoration: "none" }}
      >
        <GatsbyImage
          image={logo}
          sx={{
            height: ["40px", "50px", null, "60px", null],
            width: ["61px", "76px", null, "96px", null],
            filter: isNavOpen ? "invert(1)" : "none",
            variant: "variants.siteLogo",
          }}
          alt={title}
          objectFit="contain"
          loading="eager"
          imgStyle={{ objectFit: "contain" }}
        />
      </Link>

Relevant file: https://github.com/ehowey/erichoweydev/blob/master/src/components/header/branding.js

You can view a live example of this at: https://www.erichowey.dev/

###Video

https://user-images.githubusercontent.com/204841/115956370-83149000-a4b9-11eb-99bd-d0a3212a012b.mp4

Steps to reproduce

You can fork and deploy my site if you want a live example to play with, but note this will not be present in local development.

https://github.com/ehowey/erichoweydev

Goto : https://www.erichowey.dev/

1. Load site in Chrome/Edge (should load and look fine)
2. Close browser window.
3. Reload site again (logo should be blurry)
4. Interact with page, click some links etc (logo should sharpen)

Expected result

Logo should sharpen like all other images.

Actual result

Logo remains blurred until page interaction in Chromium browsers.

Environment

Not relevant, as this is a production bug. Site is hosted with Netlify if that matters.

My guess

I think this is a caching issue. Something to do with how Chromium is handling and detecting that image, either due to it being in a Layout component (which is present on each page), maybe due to the query being “by name” and not by “relative path” is causing a hashing issue?

Other notes

Possibly related to: https://github.com/gatsbyjs/gatsby/issues/30671

I also checked on Twitter - and others see a blurry logo as well. So it is not specific to my computer/system.