无需webpack，使用 Node.js 压缩本地图片：sharp 与 imagemin 的对比与应用

942字
5分钟
2024-07-23
- Node脚本

在现代 web 开发中，优化图片大小是提升网站性能的关键步骤之一。本文将介绍如何使用 Node.js 库 sharp 和 imagemin 压缩本地图片，并对这两种工具的功能和压缩能力进行详细对比。

sharp 的使用

安装 sharp

首先，通过 npm 安装 sharp：

1
npm install sharp

使用 sharp 进行图片处理

sharp 是一个高性能的图片处理库，支持多种图片操作。以下是一些常见的用法：

调整大小 (Resize)：

1
const sharp = require("sharp");
2

3
sharp("input.jpg")
4
  .resize(300, 200) // 300px 宽，200px 高
5
  .toFile("output.jpg", (err, info) => {
6
    if (err) {
7
      console.error(err);
8
    } else {
9
      console.log(info);
10
    }
11
  });

裁剪 (Crop)：

1
sharp("input.jpg")
2
  .resize(300, 300, {
3
    fit: sharp.fit.cover,
4
    position: sharp.strategy.entropy,
5
  })
6
  .toFile("output.jpg", (err, info) => {
7
    if (err) {
8
      console.error(err);
9
    } else {
10
      console.log(info);
11
    }
12
  });

旋转 (Rotate)：

1
sharp("input.jpg")
2
  .rotate(90) // 顺时针旋转90度
3
  .toFile("output.jpg", (err, info) => {
4
    if (err) {
5
      console.error(err);
6
    } else {
7
      console.log(info);
8
    }
9
  });

添加水印 (Composite)：

1
sharp("input.jpg")
2
  .composite([{ input: "watermark.png", gravity: "southeast" }])
3
  .toFile("output.jpg", (err, info) => {
4
    if (err) {
5
      console.error(err);
6
    } else {
7
      console.log(info);
8
    }
9
  });

压缩目录下的所有图片：

1
const sharp = require("sharp");
2
const fs = require("fs");
3
const path = require("path");
4

5
const inputDir = "path/to/your/images";
6
const outputDir = "path/to/output/images";
7

8
fs.readdir(inputDir, (err, files) => {
9
  if (err) {
10
    console.error("Error reading input directory:", err);
11
    return;
12
  }
13

14
  files.forEach((file) => {
15
    const inputFile = path.join(inputDir, file);
16
    const outputFile = path.join(outputDir, file);
17

18
    sharp(inputFile)
19
      .resize(800)
20
      .toFormat("jpeg", { quality: 80 })
21
      .toFile(outputFile, (err, info) => {
22
        if (err) {
23
          console.error("Error processing file:", err);
24
        } else {
25
          console.log("File processed:", info);
26
        }
27
      });
28
  });
29
});

imagemin 的使用

安装 imagemin

首先，通过 npm 安装 imagemin 及其相关插件：

1
npm install imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo

使用 imagemin 进行图片压缩

imagemin 是一个高度可配置的图片压缩库，支持多种插件。由于 imagemin 是一个 ES 模块，因此我们不能使用 require 来引入它，我们需要在 package.json 中添加如下代码来开启ES Module：

1
"type": "module",

以下是一些常见的imagemin用法：

压缩 JPEG：

1
import imagemin from "imagemin";
2
import imageminMozjpeg from "imagemin-mozjpeg";
3

4
(async () => {
5
  await imagemin(["images/*.jpg"], {
6
    destination: "output",
7
    plugins: [imageminMozjpeg({ quality: 70 })],
8
  });
9
})();

压缩 PNG：

1
import imagemin from "imagemin";
2
import imageminPngquant from "imagemin-pngquant";
3

4
(async () => {
5
  await imagemin(["images/*.png"], {
6
    destination: "output",
7
    plugins: [
8
      imageminPngquant({
9
        quality: [0.6, 0.8],
10
      }),
11
    ],
12
  });
13
})();

压缩 SVG：

1
import imagemin from "imagemin";
2
import imageminSvgo from "imagemin-svgo";
3

4
(async () => {
5
  await imagemin(["images/*.svg"], {
6
    destination: "output",
7
    plugins: [imageminSvgo()],
8
  });
9
})();

压缩 GIF：

1
import imagemin from "imagemin";
2
import imageminGifsicle from "imagemin-gifsicle";
3

4
(async () => {
5
  await imagemin(["images/*.gif"], {
6
    destination: "output",
7
    plugins: [imageminGifsicle({ optimizationLevel: 3 })],
8
  });
9
})();

压缩目录下的所有图片：

1
import imagemin from "imagemin";
2
import imageminMozjpeg from "imagemin-mozjpeg";
3
import imageminPngquant from "imagemin-pngquant";
4
import imageminSvgo from "imagemin-svgo";
5
import path from "path";
6

7
const inputDir = "path/to/your/images/*.{jpg,png,svg}";
8
const outputDir = "path/to/output/images";
9

10
(async () => {
11
  const files = await imagemin([inputDir], {
12
    destination: outputDir,
13
    plugins: [
14
      imageminMozjpeg({ quality: 80 }),
15
      imageminPngquant({
16
        quality: [0.6, 0.8],
17
      }),
18
      imageminSvgo(),
19
    ],
20
  });
21
  console.log("Images optimized:", files);
22
})();

sharp 与 imagemin 的对比

压缩效率

sharp 使用 libvips 库，压缩速度非常快，尤其是在处理大批量图片时表现优异。
imagemin 依赖于具体的插件，不同的插件压缩效率有所不同。总体来说，imagemin 的压缩速度稍慢于 sharp，但提供了更多格式的支持。

压缩质量

sharp 提供了高质量的压缩效果，支持调整压缩质量和图片大小，可以在保持较好图片质量的同时显著减少文件大小。
imagemin 提供了多个插件，用户可以根据需要选择不同的插件来优化不同格式的图片。其压缩质量也非常高，尤其是在使用特定的优化插件时（如 imagemin-mozjpeg）。