[gatsby-image-plugin] all images are blurry on build

Description

I’m trying to upgrade to v3 and I noticed all my images using the new gatsby-image-plugin render blurred in build mode, they work fine in develop mode thou. Anyone having the same issue?

Steps to reproduce

link to reproduction: https://github.com/joaopedrocoelho/gatsby-image-bug

• make a new gatsby project from the default starter
• change the index.js code to this:

import { Link, graphql, useStaticQuery } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => {
  const ImgQuery = useStaticQuery(graphql`
    query Img {
      file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
        }
      }
    }
  `)

  const Img = getImage(ImgQuery.file)

  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <GatsbyImage image={Img} />
      <p>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </p>
    </Layout>
  )
}

export default IndexPage

Expected result

The images should load properly.

Actual result

The images are blurry.

Environment

System: OS: Windows 10 10.0.19041 CPU: (4) x64 Intel® Core™ i5-6200U CPU @ 2.30GHz Binaries: Node: 14.15.4 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD Languages: Python: 3.8.3 - /c/Python38/python Browsers: Chrome: 88.0.4324.190 Edge: Spartan (44.19041.423.0), Chromium (89.0.774.45) npmPackages: gatsby: ^3.0.1 => 3.0.1 gatsby-plugin-gatsby-cloud: ^2.0.0 => 2.0.0 gatsby-plugin-image: ^1.0.0 => 1.0.0 gatsby-plugin-manifest: ^3.0.0 => 3.0.0 gatsby-plugin-offline: ^4.0.0 => 4.0.0 gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0 gatsby-plugin-sharp: ^3.0.0 => 3.0.0 gatsby-source-filesystem: ^3.0.0 => 3.0.0 gatsby-transformer-sharp: ^3.0.0 => 3.0.0 npmGlobalPackages: gatsby-cli: 3.0.0

[LekoArts]

Hi, thanks for the issue!

We have an issue template for bug reports to make it quicker for both sides. Please follow the template.

<!--
  Please fill out each section below, otherwise, your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.

  Useful Links:
  - Documentation: https://www.gatsbyjs.com/docs/
  - How to File an Issue: https://www.gatsbyjs.com/contributing/how-to-file-an-issue/

  Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
-->

## Description

Describe the issue that you're seeing.

### Steps to reproduce

Clear steps describing how to reproduce the issue. **Please** link to a reproduction, this makes your issue _much_ easier to diagnose (seriously).

How to Make a Minimal Reproduction: https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/

### Expected result

What should happen?

### Actual result

What happened.

### Environment

Run `gatsby info --clipboard` in your project directory and paste the output here.

[LekoArts]

Thanks for that clarification! The files need to be served by a webserver, locally you can emulate this by using gatsby serve. So it’s all working correctly 😃