I use StaticImage in Gatsby. And when I compare <img>and <StaticImage>, StaticImage's quality is bad, even though I make quality={90} or {100}. Is there way to make the quality better or do I have some mistake?
<StaticImage src='../../images/welcome.svg'
alt='a'
placeholder='a'
width={375}
height={502}
quality={100}
/>
<img src={image} alt='a' width='375' height='502' />
I do not think that Gatsby Image (hence StaticImage) supports SVGs out of the box, that's why it's not applying any transformation.From the docs:
formats Default component prop value: ["auto", "webp"]. Default resolver prop value: [AUTO, WEBP]
The Gatsby Image plugin supports four output formats: JPEG, PNG, WebP and AVIF. By default, the plugin generates images in the same format as the source image, as well as WebP. For example, if your source image is a PNG, it will generate PNG and WebP images. In most cases, you should not change this. However, in some cases you may need to manually set the formats. One reason for doing so is if you want to enable support for AVIF images. AVIF is a new image format that results in significantly smaller file sizes than alternative formats. It currently has limited browser support, but this is likely to increase. It is safe to include as long as you also generate fallbacks for other browsers, which the image plugin does automatically by default.
In your case, using an SVG, I'd suggest using the standards <img> tag or inlining the SVG directly using one of the multiple approaches suggested at Import SVG as a component in Gatsby
