gatsbygatsby-image

gatsby js has blurry images when I run gatsby build

I have a site that I need to run on an internal server. I dont have access to the site and I am just going to do gatsby build and give them the public folder. But all my images are a blurry mess. Is this the right way to do it? and why are my images blurry

Solution

  • If you see your image quality not good enough for large image in gatsby-image then apply maxWidth (for an image which width is larger than height) / maxHeight(for an image which height is larger than width) and quality in graphql query.

    const query = graphql`
  query {
        f_2: file(relativePath: { eq: "f_2.png" }) {
      childImageSharp {
        fluid(quality: 100, maxWidth: 1000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`