gatsby js has blurry images when I run gatsby build

Question

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

Does this answer your question? [Gatsby, "gatsby--image" not showing image when project is "build" but showing properly while in development](https://stackoverflow.com/questions/57826664/gatsby-gatsby-image-not-showing-image-when-project-is-build-but-showing-pr) — Nick Grealy, Aug 06 '23 at 14:55

score 6 · Answer 1 · answered Dec 13 '19 at 07:57

If you're getting images with noticeable compression artifacts, the first thing to try would be increasing the quality property in your gatsby-image GraphQL query (example below). It defaults to 50, so I'd recommend increasing that to something like 90 to start, and if that fixes your issue, you can experiment with lower values if you find that increases image filesize too much. The Gatsby team usually makes the same recommendation when the question of improving image quality comes up in GitHub issues. You can also play around with the maxWidth parameter, especially if you're looking to render full size images on larger viewports, e.g.,:

const images = useStaticQuery(graphql`
  query {
      allImageSharp {
        fluid(maxWidth: 2048, quality: 90) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`)

Tough to say more without a reproducible example to check out :) The gatsby-image docs are very thorough — and I'd recommended checking those out to understand what's happening to your images when you run gatsby build, and what options are available to you to tweak.

Hope this helps!

But can I just run gatsby build and take the public folder and drop it somewhere and everything work is my main question. Thanks — André Jarboe II, Dec 13 '19 at 17:01
Yep! In fact I'll often `cd` into the public folder and run `npx serve` (any old HTTP server will do, take your pick) if I want to verify the compiled site locally — this is exactly what what would be deployed by services like Netlify. Re-reading your question, I realized it's possible what you described as a "blurry mess" were just the super-scaled down images Gatsby generated to use as thumbnails or on lower res viewports. — Jesse Stuart, Dec 13 '19 at 20:41

score 2 · Accepted Answer · answered Jun 14 '20 at 09:23

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
        }
      }
    }
  }
`

gatsby js has blurry images when I run gatsby build

2 Answers2