ZhenYu's 知识库

外观

Node 中怎么进行图片压缩

约 1036 字大约 3 分钟

nodesharpimage

2024-08-23

在现代 Web 开发中，图像是不可或缺的一部分，但大型图像可能导致网页加载速度变慢。为了提高性能和用户体验，我们常常需要对图像进行压缩。在 Node.js 中，我们可以利用各种库和工具来轻松实现这一目标。本文将深入讨论压缩的使用场景、核心功能和实际案例。

sharp
sharp

使用场景

图片压缩在以下情况下特别有意义：

  1. Web 应用性能优化： 加载速度对用户体验至关重要，特别是对于移动用户。压缩图像可以显著减少页面加载时间。
  2. 存储空间节省： 对于需要大量图像存储的应用，压缩可以帮助节省服务器存储空间。
  3. 带宽优化： 图片压缩有助于降低传输成本，尤其是对于那些有限带宽的应用。
  4. 移动应用开发： 移动应用通常受限于设备资源，压缩图像可以减少内存和网络使用。

基本概念和常用方法

概念

图片压缩有两个主要方面：有损压缩和无损压缩。有损压缩会导致图像质量损失，但文件大小更小。无损压缩保持图像质量，但文件大小相对较大。

常用方法

  1. 使用图像处理库： 如 Sharp、Jimp 等。这些库提供了丰富的功能，包括调整大小、压缩质量等。
  2. 使用专业工具： 如 ImageMagick，它是一个功能强大的命令行工具，支持各种图像处理操作。 让我们深入了解使用图像处理库的方法。

图像处理库示例代码

使用 Sharp 库

const sharp = require('sharp');

// 压缩图像
sharp('input.jpg')
  .resize(500)
  .toFile('output.jpg', (err, info) => {
    if (err) {
      console.error(err);
    } else {
      console.log(info);
    }
  });

使用 Jimp 库

const Jimp = require('jimp');

// 压缩图像
Jimp.read('input.jpg')
  .then(image => {
    return image
      .resize(500, Jimp.AUTO)
      .quality(80)
      .write('output.jpg');
  })
  .catch(err => {
    console.error(err);
  });

实践案例

步骤一：安装 Sharp

npm install sharp
或
yarn add sharp

步骤二：编写脚本

在 Vscode 或者其它编辑器中新建一个index.js 文件：

const sharp = require('sharp');

function minitImage(filePath) {
    return new Promise((resolve, reject) => {
        sharp(filePath)
            .webp({quality: 40})
            .toFile(filePath + '.webp')
            .then(data => {
                resolve({
                    ...data,
                    success: true,
                    sourcePath: filePath,
                    afterPath: filePath + '.webp'
                });
            })
            .catch(err => {
                reject({success: false, ...err});
            });
    });
}

步骤三：运行脚本

$ rainli tiny /Users/nowcoder/Downloads/tinyAssets

[tiny] [warn] /Users/nowcoder/Downloads/tinyAssets/企业微信截图_f005cf51-f3fb-4433-8238-41608564c694.png.webp already in WebP format.
[tiny] [warn] /Users/nowcoder/Downloads/tinyAssets/zhongyanglipinwenwu.webp already in WebP format.
[tiny] [warn] /Users/nowcoder/Downloads/tinyAssets/zhongguomeishuguan.webp already in WebP format.
[tiny] [warn] /Users/nowcoder/Downloads/tinyAssets/header_.png.webp already in WebP format.
[tiny] [warn] /Users/nowcoder/Downloads/tinyAssets/VCG211479604817.webp already in WebP format.
[tiny] [warn] /Users/nowcoder/Downloads/tinyAssets/Designer.png.webp already in WebP format.
[tiny] [info] /Users/nowcoder/Downloads/tinyAssets/image-26.png {"format":"webp","width":1090,"height":269,"channels":3,"premultiplied":false,"size":8674,"success":true,"sourcePath":"/Users/nowcoder/Downloads/tinyAssets/image-26.png","afterPath":"/Users/nowcoder/Downloads/tinyAssets/image-26.png.webp"}
[tiny] [info] /Users/nowcoder/Downloads/tinyAssets/image-25.png {"format":"webp","width":1280,"height":684,"channels":3,"premultiplied":false,"size":34284,"success":true,"sourcePath":"/Users/nowcoder/Downloads/tinyAssets/image-25.png","afterPath":"/Users/nowcoder/Downloads/tinyAssets/image-25.png.webp"}
[tiny] [info] /Users/nowcoder/Downloads/tinyAssets/image-28.png {"format":"webp","width":1280,"height":995,"channels":3,"premultiplied":false,"size":36278,"success":true,"sourcePath":"/Users/nowcoder/Downloads/tinyAssets/image-28.png","afterPath":"/Users/nowcoder/Downloads/tinyAssets/image-28.png.webp"}
[tiny] [info] /Users/nowcoder/Downloads/tinyAssets/image-27.png {"format":"webp","width":1280,"height":991,"channels":3,"premultiplied":false,"size":35780,"success":true,"sourcePath":"/Users/nowcoder/Downloads/tinyAssets/image-27.png","afterPath":"/Users/nowcoder/Downloads/tinyAssets/image-27.png.webp"}
[tiny] [info] /Users/nowcoder/Downloads/tinyAssets/image-25-1.png {"format":"webp","width":1280,"height":684,"channels":3,"premultiplied":false,"size":34284,"success":true,"sourcePath":"/Users/nowcoder/Downloads/tinyAssets/image-25-1.png","afterPath":"/Users/nowcoder/Downloads/tinyAssets/image-25-1.png.webp"}
[tiny] [info] /Users/nowcoder/Downloads/tinyAssets/image-29.png {"format":"webp","width":1280,"height":810,"channels":4,"premultiplied":false,"size":125648,"success":true,"sourcePath":"/Users/nowcoder/Downloads/tinyAssets/image-29.png","afterPath":"/Users/nowcoder/Downloads/tinyAssets/image-29.png.webp"}

提示、技巧和注意事项

  1. 选择适当的压缩质量： 在保持良好图像质量的同时，选择适当的压缩质量是至关重要的。
  2. 多次压缩慎重： 多次压缩可能导致图像质量急剧下降，因此应慎重选择压缩次数。
  3. 考虑异步处理： 图像处理通常是一个耗时的操作，考虑使用异步方法以不阻塞主线程。

总结

通过使用 Node.js 中的图像处理库，我们可以轻松地实现图像压缩，提高网页性能和用户体验。选择合适的压缩库和参数对于项目的成功至关重要。希望本文对你在 Node.js 中进行图片压缩提供了清晰的指导。

参考链接：