调整大小后图像质量下降

Question

大家好，我遇到了以下问题。在我的网站上，用户可以上传图片。由于大小和 space 在磁盘上等

，图像将被调整大小

我正在使用 sharp 调整图像大小：https://www.npmjs.com/package/sharp

在我的测试中，我上传了一张 ~3000x2000 的图片，它正在调整为 600x600。我还将它的大小调整为 300x300 和 120x120。在 120x120 分辨率下，图像看起来很模糊..

这是图片，未调整大小。此图像为 3000x2000，但已通过浏览器调整为 ~600x600：

这里是使用 Sharp 调整为 600x600 的图像：

正如您所看到的，下图的质量较低。这是为什么？

这是调整图像大小的部分：

let resizeData = await sharp(dir + path)
    .resize({ width: 600, height: 600 })
    .toBuffer();

fs.writeFileSync(dir + path, resizeData);

我是不是漏掉了一些配置？能不能保持质量？

Answer 1

对我来说，问题似乎是压缩质量问题。 JPEG 是一种有损格式，这意味着为了获得更小的文件大小而丢弃了数据。这会引入伪像，即图像中的缺陷。

在第一张图片中，一个 10x10 像素的伪像在缩小后最终可能会小于一个像素。在第二张图片中，一个 10x10 像素的伪影更加明显，因为它在您的屏幕上实际上是 10x10 像素。

查看 the documentation 有一个 quality 选项：

options.quality integer 1-100 (optional, default 80)

您可以尝试将质量设置设为 90，甚至 100，这应该会给您带来更大的文件大小，但压缩伪影不太明显。

您也可以 try PNG format 这是一种无损格式，这意味着显示的像素不会改变。但是，文件大小会大很多。

Losing image quality after resizing it