How to Customize Gatsby Images

Posted by Josh on November 11, 2021

I had a problem today where a Gatsby site had a blurry image. The original image was a PNG, but Gatsby was creating a blurry WebP, and I wanted to be sure that the site only served the PNG file without reducing the quality.

It turns out that I just needed to add two props to the StaticImage component.

So, instead of this:

<StaticImage src="../images/cat.png" alt="Cat" className="img-thumbnail" />

I set the formats to only png, and the quality to 100 like this:

<StaticImage
    src="../images/cat.png"
    alt="Cat"
    className="img-thumbnail"
    formats={["png"]}
    quality={100}
/>

Then I cleared the Gatsby cache and redeploy the site.

I’ve seen some StackOverflow and Github questions where people had similar problems. I wrote this post so that people might stumble upon it and solve their problem quickly.