How to Customize Gatsby Images
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.