Gatsby Static图像质量很差

Question

我在 Gatsby 中使用 StaticImage。当我比较

<img>

和

<StaticImage>

时，StaticImage 的质量很差，尽管我制作了

quality={90} or {100}

。有办法提高质量还是我有什么错误？

 <StaticImage src='../../images/welcome.svg'
   alt='a'
   placeholder='a'
   width={375}
   height={502}
   quality={100}
 />

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

Answer 1

我不认为 Gatsby Image（因此

StaticImage

）支持开箱即用的 SVG，这就是为什么它没有应用任何转换。来自 docs：

formats 默认组件属性值：[“auto”，“webp”]。默认解析器属性值：[AUTO，WEBP]

Gatsby Image 插件支持四种输出格式：JPEG、PNG、WebP 和 AVIF。默认情况下，插件生成相同格式的图像 作为源图像，以及 WebP。例如，如果您的来源 image 是PNG，它将生成PNG 和WebP 图像。在多数情况下， 你不应该改变这个。但是，在某些情况下您可能需要 手动设置格式。这样做的原因之一是如果您想 启用对 AVIF 图像的支持。 AVIF 是一种新的图像格式 与其他格式相比，文件大小明显更小。 目前它的浏览器支持有限，但这很可能 增加。只要您还生成后备，那么包含它就是安全的 对于其他浏览器，图像插件会自动执行此操作 默认。

在您的情况下，使用 SVG，我建议使用标准

<img>

标签或使用

将 SVG 作为 Gatsby 中的组件导入

中建议的多种方法之一直接内联 SVG

Answer 2

width

中使用道具

<StaticImage />

会扰乱图像的分辨率。我将用这个例子来解释： 如果我有一个 100px 宽的 img 元素，我希望分辨率为 100px*100px 的图片看起来不错。所以我使用该组件

<StaticImage width={100} />

理论上这应该可行吗？嗯……不。图像宽 100 像素，但元素

实际上

比真实像素大。 这是高清屏幕的基础，每个计算出的像素实际上是由多个真实像素组成的。回到这个例子，如果元素的

compulated

大小是 100px，那么 real 大小（假设）是 200px。 然后，在 StaticImage 组件中使用

width

属性将阻止 gatsby 下载大于所提供值的图像。所以元素是 200px 宽，图像仍然是 100px 宽，因此图像看起来质量很低。

作为修复，我决定不使用 width 属性，而只使用 Css 控制 img 的大小。 这可能与 hight 道具相同，但我没有测试过......