简介
在前端开发过程中，图片压缩是非常重要的一环。它不仅可以缩小图片体积，使网页加载速度更快，同时还可以节省存储空间。@mora/tinypng 就是一款 npm 包，可以通过 API 调用 tinypng.com 的功能对图片进行压缩。
安装
使用 npm 或者 yarn 进行安装：
--- ------- ------------- - -- ---- --- -------------
使用
首先需要在 tinypng.com 中注册并获取 API Key。然后在需要使用的文件中引入包：
----- ------- - -------------------------
自动压缩文件夹中所有图片
------------------------- ---------------
-------- -- -
---------------- ------ ---- ---- --------------
--
---------- -- -
--------------------- -----
---手动压缩单个图片
-------------------------- ---------------
------------ -- -
-- ----------- ------- ------
-- ----------- -------------------
--
---------- -- -
--------------------- -----
---深入理解
原压缩原理
图片压缩过程中，主要是通过“颜色减少”和“像素压缩”两种方式来减小文件大小。具体来说，tinypng 底层使用了 pngquant 和 optipng 两个优秀的图片处理工具来进行压缩。
API 限制
tinypng 提供了 API 来进行图片压缩。但在使用 API 时，需要注意 API Key 有每个月 500 张限制。如果需要更多的压缩量，则需要购买高级版。
相关注意事项
- tinypng 不支持所有的图片格式，目前只支持 PNG 和 JPEG 格式的图片。
- 在对 PNG 图片进行压缩时，可能会出现边缘部分颜色出现问题的情况。这是因为 pngquant 算法默认使用了 dither（抖动）来平滑颜色过渡。尝试关闭 dither 可以解决这个问题。
- 对于一些 AGIF 格式的图片，也可以通过 tinypng 进行压缩，但可能会出现压缩出错等问题，需要进行处理。
总结
通过本文我们可以学习到使用 @mora/tinypng 来进行图片压缩的方式，以及其原理和相关注意事项。图片压缩是前端开发中不可避免的一个环节，学习掌握这方面的知识可以提高我们的工作效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fd081e8991b448dd5a6