图片压缩是图片优化效益较高的一种方式，对于拥有大量图片资源的网站来说优化效果是非常明显的，图片优化也是前端性能优化的一个重要指标。图片压缩的好处在于能够减少图片请求过程中的网络带宽，加快图片的加载速度，从而提升用户体验
为什么要做图片压缩？
一般情况下开发者是不太会主动关注图片的大小，大概率是在开发或上线过程中发现某些图片加载时间过长或者打包后的图片资源过于庞大才会引起注意。这种情况下就会想到给图片瘦瘦身。至于为什么要压缩，一种情况可能是UI同学提供的图片压缩效果没那么好一般归于压缩工具不给力，另一种情况可能是产品上传的图片本身就很大，有时候加载需要老半天。对于这种大而慢的图片，说明我们该压压了
如何压缩？
目前主流的压缩方式主要有以下几种：
在线压缩：
tinyjpg | tinypng （国外） 在业界都是有口皆碑的，优势是提供对外API，压缩效率能达到惊人的50%-70%，不足的是目前官网单次只能上传20张图片，单张不能超过5M，只支持JPG 、JPEG、PNG、WEBP这几种格式的压缩
docsmall （国内）没有对外API，适合在线上传下载。在国内访问速度较快，压缩效率也还行
智图 （国内）是腾讯的一款图片在线压缩工具，没有对外API，适合在线上传下载。在国内访问速度较快，压缩效率也还行
压缩库：
imagemin 支持有损和无损压缩，支持jpg，png，webp等格式的图片压缩，不同的格式对应不同的插件。插件依赖底层库安装容易失败。他的压缩导致画质损失比较严重，而且压缩率也不是很高
pngquant 是一个命令行应用程序也是一个用于有损压缩PNG图像的库，对于png图片的压缩效率也还不错
前端压缩：
前端采用 canvas 技术实现图片的压缩，主要流程为以下几步：
1、input 读取到文件，使用FileReader将其转换为base64编码
2、新建img，使其src指向刚刚的base64
3、新建canvas，将img画到canvas上
4、利用canvas.toDataURL/toBlob将canvas导出为base64或Blob5、将base64或Blob转化为File
压缩效率不是很明显，对于批量图片操作不是很方便，而且很容易出现一些奇奇怪怪的问题（如：压缩后反而比原图更大）
离线压缩：
1、借助PS工具实现图片压缩
2、借助系统自带的画图工具实现图片压缩
这种方式UI同学可能会用的相对多一些，很少会有开发同学会这么用
如何选择压缩方案？
图片压缩主要有无损和有损两种，下面这张图是这两种压缩方式的对比:
一般 有损压缩 的压缩率会大大高于 无损压缩
针对上面提到的压缩工具，我们选出以下两款压缩效率比较好，也比较适合前端做图片压缩的方案
tinypng\tinyjpg：
1、有损压缩图片压缩率可以高达 50% - 70% ,并且肉眼很难看出任何的画质损失
2、主要使用Quantization的技术，通过合并图片中相似的颜色，通过将 24 位的 PNG 图片压缩成小得多的 8 位色值的图片，并且去掉了图片中不必要的 metadata（元数据，从 Photoshop 等工具中导出的图片都会带有此类信息），这种方式几乎能完美支持原图片的透明度
3、在业界都是有口皆碑的
pngquant：
1、pngquant是国外的一个有损的PNG压缩开源库，提供了命令行形式和源码库形式。将24位或32位的RGBA PNG图转换成8位PNG图并保留透明度通道。通过这个库的转化可以显著减少png文件大小（通常减少70%）。生成的图片文件可以兼容所有现代web浏览器，在IE6下比24-bit PNGs也有更好的表现
2、结合Vector_quantization算法生成高质量的色彩范围
3、独特的自适应抖动算法，比标准的FloydSteinberg算法具有更强的抗噪性
4、对于jpg和webp不是很友好，需安装应用程序
最终方案？
经过上述对比，最终选用了tinypng\tinyjpg这个方案。实现方式是自己动手撸一个node命令行工具，底层依赖于tinypng\tinyjpg这两个网站提供的API，该方式不需要申请apikey，模拟web端压缩方式。目前官网有提供node api但是需要申请apikey，该方式每个月的图片压缩限额是500张，如果需要压缩更多就需要付费了。对于这么优秀的压缩工具，大家付费支持一下也是可以的
为什么是命令行工具而不是webpack插件？
webpack插件主要有以下几个弊端：
1、只适用于webpack构建的项目，有一定的局限性，如果换成vite等其他构建工具那么就没法使用了
2、webpack插件原理是每次构建的时候都会走对应的钩子，这样的话就会频繁触发图片压缩操作，如果项目图片够多，每次打包的耗时将不可估量
3、只能处理通过require和import引入的图片，对于static下的图片无能为力
基于上述情况是我们做成node命令行工具的主要原因，它使用起来也比较灵活，随时随地可用
如何使用？
1、安装
2、查看如何使用
-V：查看版本号
-I：指定文件夹的方式压缩里面的图片
-F：指定需要压缩的具体图片地址
-O：指定压缩后输出的文件路径，不指定默认会覆盖原图
-R：如果指定了文件夹输入，为true时，会递归子文件夹进行压缩，为false时只会压缩一级文件夹
-L：压缩过程是否需要查看日志
-h：查看工具如何使用
3、使用效果
该node命令行工具基本可以实现日常的图片压缩需求，比如可以根据文件夹递归压缩或具体图片地址压缩，支持原图覆盖或指定输出目录，可查看压缩过程以及压缩效率
如何实现？
1、解析命令行参数
这里主要是采用了commander这个第三方包，用来指定使用node来解析命令行输入参数，输入参数校验，除此之外还可以设置语法提示等操作
2、获取参数并执行具体压缩逻辑
拿到输入参数执行对应的压缩逻辑，若输入指定文件夹，那么就需要遍历该文件夹下的所有图片，其次是否需要递归遍历，获取到具体图片即可上传压缩，这个过程还会校验文件夹、图片地址，图片格式是否正确等
3、图片上传压缩
将图片随机上传到tinypng.com，tinyjpg.com这两个网站进行压缩
4、压缩后下载处理
将压缩后的图片下载到本地，看是否有指定输出目录，若无则直接覆盖掉原图
5、解决实际问题
tinypng.com，tinyjpg.com这两个网站单次最多只能压缩20张图片，这里通过两个网站随机切换，并且在上传时动态更新IP解决可以无限次上传操作
总结
源码地址：
https://github.com/mr-kings/tinyimg-scripts#readmenpm包：
npm i -g tinyimg-scripts # or yarn add -g tinyimg-scripts使用：
tinyimg-scripts -I img/ -O img/newImg -R -L# ortinyimg-scripts -F img/a.png -O img/newImg -L这款图片压缩node命令行工具，使用方式比较灵活，压缩效率也很棒，能做到开箱即用。目前只支持JPG、JPEG、PNG这几种格式的图片压缩，单张图不能超过5M，并且需要能够访问到这个网站：https://tinyjpg.com 才能进行压缩
参考资料
1、https://zhuanlan.zhihu.com/p/136757536
2、https://zhuanlan.zhihu.com/p/91035613
3、https://cloud.tencent.com/developer/article/1034208
4、https://tinypng.com
5、https://zhuanlan.zhihu.com/p/91035613
6、https://zhuanlan.zhihu.com/p/152317953
喜欢的话别忘了 分享、点赞、收藏 三连哦~
欢迎关注公众号 前端进阶体验 收获更多优质文章~
前端进阶体验 分享前端技术，你想要的，这里都会有~ 本文使用 文章同步助手 同步
网友评论