CODEWITHSUNDEEP
gatsbygatsby-image
user42195
user42195

Reputation: 339

Gatsby StaticImage quality is bad

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

enter image description here

<img src={image} alt='a' width='375' height='502' />

enter image description here

Upvotes: 0

Views: 1820

Answers (2)

Augusto Tobia
Augusto Tobia

Reputation: 11

I've been dealing with this issue. I found that using the prop width inside a <StaticImage /> messes the resolution of the image. I'll explain with this example: If i have an img element 100px wide i EXPECT that an picture with a resolution of 100px*100px would look fine. So i use the component

<StaticImage width={100} />

In theory this should work right? well... no. The image is 100px wide, but the element is actually bigget than that in real pixels.

This is the basis of an HD screen, each computed px is actually made by multiple real px. So back to the example, if the computed size of the element is 100px, then the real size is (hypothetically) 200px.

Then, using the width prop inside a StaticImage component will prevent gatsby from downloading images bigger than the value provided. So the element is 200px wide, the image is still 100px wide, thus the image looks low quality.

As a fix i decided to not use the width prop, and just control the size of the img with Css. This is probably the same with the hight prop but i didn't test that...

Upvotes: 1

Ferran Buireu
Ferran Buireu

Reputation: 29320

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

Upvotes: 2

Related Questions