这样使用Node.js压缩PNG图片，效果高达75％

Posted 2021-04-25 前端之巅

作者 | Nick Major

译者 | 张健欣

编辑 | 张之栋, Yonie

在本文中，我们将向你展示如何使用 Node.js 编程压缩 PNG 图片。我们将使用一个名为 Imagemin 的 npm 包，它将为我们完成大部分繁重的工作。使用 Imagemin，我们将实现 pngquant 图像压缩库。这个图像转换将减小 75% 的文件大小，同时还保持你的图像看起来不错。

在继续之前，确保你已经安装了 Node.js，并为我们的代码设置了一个应用程序目录。

如果需要，我们写了一个安装 Node.js 的指南: http://localhost:3000/article/guide-to-installing-nodejs-on-windows-linux-or-macos

准备就绪之后，让我们正式开始吧！

安装 Npm 包

在我们开始编写代码之前，我们需要安装 npm 包 imagemin 和 imagemin-pngquant。

imagemin-pngquant npm 包是 pngquant 压缩库 的一个 Node.js 实现以及 imagemin npm 包的一个插件。

imagemin npm 包: https://github.com/imagemin/imagemin 

imagemin-pngquant npm 包: https://github.com/imagemin/imagemin-pngquant 

pngquant 压缩库: https://pngquant.org/ 

你可以使用以下命令来进行安装：

# With Npm
$ npm install imagemin imagemin-pngquant --save

# With Yarn
$ yarn add imagemin imagemin-pngquant

当安装完成，我们就可以进行下一步！

压缩单个 PNG 图片

现在可以写一些代码了！

在编写和测试如下代码之前，确保你在项目的根目录有一个想要压缩的图片。而且确保你已经为压缩后的图片创建了输出的目录。

一旦你完成了这两件事情，打开你最爱的文本编辑器，将如下代码添加到你的 Node.js 文件中。我们将给你完整代码并稍后全部进行解释。

完整代码：

Node.js

const imagemin = require("imagemin");
const imageminPngquant = require("imagemin-pngquant");

(async () => {
  const files = await imagemin(["your-image.png"], {
    destination: "compressed-images",
    plugins: [
      imageminPngquant({
        quality: [0.5, 0.6]
      })
    ]
  });
})();

我们可以将这段代码分解讲解。

我们首先需要做的是引入 imagemin 和 imagemin-pngquant npm 包。

然后，我们创建了一个我们的代码运行其中的自触发函数。其中，我们使用 imagemin npm 包的 imagemin() 函数，这个函数将一个文件路径字符串数组和一个选项对象作为参数。

我们将自己的 PNG 文件（命名为 "your-image.png"）的路径传递给这个函数。这个图片将得到压缩。

在选项对象中，我们给出新文件输出的路径。而且，我们还指定了压缩文件时我们想要使用的 imagemin 插件。在本例中，我们压缩的是 PNG 图片，因此将使用 imagemin-pngquant 插件的 npm 包。

在你运行代码之后，压缩后的代码将输出到 **“compressed-images”目录或者任何你指定的目标目录。

如果你查看新图片的文件大小，你会发现它比原始版本小得多。而且，注意图片质量几乎没有很大影响。

压缩多个 PNG 图片并放在一个新的目录

在上面的例子中，我们一次只压缩了一张图片。但是如果你有一整个目录的图片想要压缩呢？在本段中，我们将为你展示如何压缩多个 PNG 图片。

以下代码的假设是，你有一个名为 “images” 的目录，包含 1 个或多个 PNG 图片。而且，你还有另外一个名为 “compressed-images” 的目录，用来输出你压缩后的图片。

为了使代码生效，确保你创建了这两个目录并向 “images” 目录中添加了图片。

和之前一样，我们将给你完整代码并稍后全部进行解释。

完整代码：

Node.js

const imagemin = require("imagemin");
const imageminPngquant = require("imagemin-pngquant");

(async () => {
  const files = await imagemin(["images/*.{png}"], {
    destination: "compressed-images",
    plugins: [
      imageminPngquant({
        quality: [0.5, 0.6]
      })
    ]
  });
})();

第一行代码和上面的例子相同。

在传给 imagemin() 函数的文件路径数组的参数中，我们告诉它去查找名为 "images" 目录下的所有 PNG 图片。imagemin() 函数将为该目录下的每个 PNG 图片递归运行这个函数。

在你运行代码之后，所有新图片将被输出到 “compressed-images” 目录或者任何你指定的目标目录。

而且如果你查看新图片的文件大小，你讲发现他们比原始版本小得多。同时注意，图片质量几乎不受明显影响。

    结论    

现在，你知道如何使用 Node.js 和 Imagemin npm 包压缩 PNG 图片了！希望本文对你的编码工作有所帮助！

英文原文: https://coderrocketfuel.com/article/compress-a-png-image-size-by-up-to-75-percent-with-node-js