NextJS\ 的 <Image> 组件如何使用传递的 `quality` 值？

Question

NextJS 的<Image/> 组件做了很多令人惊奇的事情。一个可选属性是quality，它在docs 中被简要定义为

优化图像的质量，1 到 100 之间的整数，其中 100 是最佳质量。默认为 75。

但是这个指标实际上做了什么？ 1 或 100 应该代表什么？假设传递了两个原始大小为 10MB 和 1MB 的图像，生成的图像将如何以不同的质量工作？是否考虑了图像的渲染大小？是否有基于此数字使用的不同压缩算法？

Answer 1

我翻遍了 NextJS 源代码，我想我还有更多答案。 NextJS 在客户端优化图像的清晰图像库（导入line 41, used lines 510 & 757，也@types/sharp 作为依赖项存在于package.json 中）。

quality 属性直接传递给sharp（有一个例外，对于传递max(0,quality-15) 的AVIF 图像）。 Sharp 目前在后台使用 libvps。

我无法准确找到 libvps 使用的算法，但 quality 似乎是其他类似类型的图像压缩工具（尤其是 jpeg）的标准。