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


安装 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/

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

压缩单个 PNG 图片

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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” 目录中添加了图片。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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” 目录或者任何你指定的目标目录。

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