npm 包 @mora/tinypng 使用教程

简介

在前端开发过程中，图片压缩是非常重要的一环。它不仅可以缩小图片体积，使网页加载速度更快，同时还可以节省存储空间。@mora/tinypng 就是一款 npm 包，可以通过 API 调用 tinypng.com 的功能对图片进行压缩。

安装

使用 npm 或者 yarn 进行安装：

npm install @mora/tinypng
# or
yarn add @mora/tinypng

使用

首先需要在 tinypng.com 中注册并获取 API Key。然后在需要使用的文件中引入包：

const tinypng = require('@mora/tinypng');

自动压缩文件夹中所有图片

tinypng('path/to/folder', 'YOUR_API_KEY')
  .then(() => {
    console.log('All images have been compressed!');
  })
  .catch(err => {
    console.log('Error:', err);
  });

手动压缩单个图片

tinypng.fromBuffer(buffer, 'YOUR_API_KEY')
  .then(result => {
    // result.data 是压缩后的图片 Buffer
    // result.info 是压缩后的信息，包括文件大小、压缩比等
  })
  .catch(err => {
    console.log('Error:', err);
  });

深入理解

原压缩原理

图片压缩过程中，主要是通过“颜色减少”和“像素压缩”两种方式来减小文件大小。具体来说，tinypng 底层使用了 pngquant 和 optipng 两个优秀的图片处理工具来进行压缩。

API 限制

tinypng 提供了 API 来进行图片压缩。但在使用 API 时，需要注意 API Key 有每个月 500 张限制。如果需要更多的压缩量，则需要购买高级版。

相关注意事项

1. tinypng 不支持所有的图片格式，目前只支持 PNG 和 JPEG 格式的图片。
2. 在对 PNG 图片进行压缩时，可能会出现边缘部分颜色出现问题的情况。这是因为 pngquant 算法默认使用了 dither（抖动）来平滑颜色过渡。尝试关闭 dither 可以解决这个问题。
3. 对于一些 AGIF 格式的图片，也可以通过 tinypng 进行压缩，但可能会出现压缩出错等问题，需要进行处理。

总结

通过本文我们可以学习到使用 @mora/tinypng 来进行图片压缩的方式，以及其原理和相关注意事项。图片压缩是前端开发中不可避免的一个环节，学习掌握这方面的知识可以提高我们的工作效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd081e8991b448dd5a6