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

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

sharp 的使用

安装 sharp

首先，通过 npm 安装 sharp：

npm install sharp

使用 sharp 进行图片处理

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

1. 调整大小 (Resize)：

   const sharp = require("sharp");
   
   sharp("input.jpg")
     .resize(300, 200) // 300px 宽，200px 高
     .toFile("output.jpg", (err, info) => {
       if (err) {
         console.error(err);
       } else {
         console.log(info);
       }
     });

2. 裁剪 (Crop)：

   sharp("input.jpg")
     .resize(300, 300, {
       fit: sharp.fit.cover,
       position: sharp.strategy.entropy,
     })
     .toFile("output.jpg", (err, info) => {
       if (err) {
         console.error(err);
       } else {
         console.log(info);
       }
     });

3. 旋转 (Rotate)：

   sharp("input.jpg")
     .rotate(90) // 顺时针旋转90度
     .toFile("output.jpg", (err, info) => {
       if (err) {
         console.error(err);
       } else {
         console.log(info);
       }
     });

4. 添加水印 (Composite)：

   sharp("input.jpg")
     .composite([{ input: "watermark.png", gravity: "southeast" }])
     .toFile("output.jpg", (err, info) => {
       if (err) {
         console.error(err);
       } else {
         console.log(info);
       }
     });

5. 压缩目录下的所有图片：

   const sharp = require("sharp");
   const fs = require("fs");
   const path = require("path");
   
   const inputDir = "path/to/your/images";
   const outputDir = "path/to/output/images";
   
   fs.readdir(inputDir, (err, files) => {
     if (err) {
       console.error("Error reading input directory:", err);
       return;
     }
   
     files.forEach((file) => {
       const inputFile = path.join(inputDir, file);
       const outputFile = path.join(outputDir, file);
   
       sharp(inputFile)
         .resize(800)
         .toFormat("jpeg", { quality: 80 })
         .toFile(outputFile, (err, info) => {
           if (err) {
             console.error("Error processing file:", err);
           } else {
             console.log("File processed:", info);
           }
         });
     });
   });

imagemin 的使用

安装 imagemin

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

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

使用 imagemin 进行图片压缩

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

"type": "module",

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

1. 压缩 JPEG：

   import imagemin from "imagemin";
   import imageminMozjpeg from "imagemin-mozjpeg";
   
   (async () => {
     await imagemin(["images/*.jpg"], {
       destination: "output",
       plugins: [imageminMozjpeg({ quality: 70 })],
     });
   })();

2. 压缩 PNG：

   import imagemin from "imagemin";
   import imageminPngquant from "imagemin-pngquant";
   
   (async () => {
     await imagemin(["images/*.png"], {
       destination: "output",
       plugins: [
         imageminPngquant({
           quality: [0.6, 0.8],
         }),
       ],
     });
   })();

3. 压缩 SVG：

   import imagemin from "imagemin";
   import imageminSvgo from "imagemin-svgo";
   
   (async () => {
     await imagemin(["images/*.svg"], {
       destination: "output",
       plugins: [imageminSvgo()],
     });
   })();

4. 压缩 GIF：

   import imagemin from "imagemin";
   import imageminGifsicle from "imagemin-gifsicle";
   
   (async () => {
     await imagemin(["images/*.gif"], {
       destination: "output",
       plugins: [imageminGifsicle({ optimizationLevel: 3 })],
     });
   })();

5. 压缩目录下的所有图片：

   import imagemin from "imagemin";
   import imageminMozjpeg from "imagemin-mozjpeg";
   import imageminPngquant from "imagemin-pngquant";
   import imageminSvgo from "imagemin-svgo";
   import path from "path";
   
   const inputDir = "path/to/your/images/*.{jpg,png,svg}";
   const outputDir = "path/to/output/images";
   
   (async () => {
     const files = await imagemin([inputDir], {
       destination: outputDir,
       plugins: [
         imageminMozjpeg({ quality: 80 }),
         imageminPngquant({
           quality: [0.6, 0.8],
         }),
         imageminSvgo(),
       ],
     });
     console.log("Images optimized:", files);
   })();

sharp 与 imagemin 的对比

压缩效率

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

压缩质量

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

功能性

• sharp 不仅仅是一个压缩工具，它还提供了强大的图片处理功能，如裁剪、旋转、调整大小、水印等。
• imagemin 专注于图片压缩，通过不同的插件支持多种图片格式的优化，但不具备图片处理的其他功能。

结论

总结来说，如果需要高效的图片处理和压缩功能，sharp 是一个非常不错的选择。如果需要优化多种图片格式且专注于压缩效果，imagemin 是更好的选择。

原文链接：https://www.jasonzk.com/nodescript/image_min/