背景

h5活动图片资源太大会影响页面加载速度，所以前端开发者一般都要将图片压缩一遍，现在业界上图片压缩不错的网站有熊猫压缩网站。但是开发者每次都要手动去这个网站上传图片进行压缩，最后再下载下来使用，这个过程会花费开发者一些时间。而有的图片不需要透明通道则转成jpg或者webp图片则图片质量更小。

目标

基于以上背景，设置目标：自动化上传与下载图片，减少前端开发时间，减少图片资源。

调研

表格数据

1、在没有压缩图片的情况下，使用sharp直接将png图片转换成jpg/jpeg

序列	png图片大小	jpg图片大小	减少率
1	733	98	86%
2	492	92	81%
3	1110	179	83%
4	830	155	81%

2、在没有压缩图片的情况下，使用sharp直接将png转换的jpg/jepg图片,再将jpg/jpeg转成webp图片

序列	png图片大小	jpg图片大小	webp图片大小	减少率
1	733	98	61	91%
2	492	92	57	88%
3	1110	179	112	89%
4	830	155	100	88%

3、在没有压缩图片的情况下，使用sharp直接将png图片转换成webp

序列	png图片大小	webp图片大小	减少率
1	733	61	91%
2	492	57	88%
3	1110	109	90%
4	830	103	87%

4、使用压缩图片的情况下，使用tinify将原图片压缩一次

序列	原png图片大小	压缩后png图片大小	减少率
1	733	154	79%
2	492	150	69%
3	1110	266	76%
4	830	199	76%

5、使用压缩图片的情况下，将压缩图片转成webp

序列	原png图片大小	压缩后png图片大小	webp图片大小	减少率
1	733	154	66	90%
2	492	150	57	88%
3	1110	266	110	90%
4	830	199	107	87%

6、使用压缩图片的情况下，将压缩图片png转成jpg

序列	原png图片大小	压缩后png图片大小	jpg图片大小	减少率
1	733	154	102	86%
2	492	150	92	81%
3	1110	266	181	83%
4	830	199	157	81%

7、使用压缩图片的情况下，将压缩图片png转成jpg,再将jpg转成webp图片

序列	原png图片大小	压缩后png图片大小	jpg图片大小	webp图片大小	减少率
1	733	154	102	63	91%
2	492	150	92	57	88%
3	1110	266	181	114	89%
4	830	199	157	103	87%

表格总结

1. png转webp跟png转jpg再转webp的减少率是差不多的。
2. 使用tinify压缩的png转webp跟没有压缩的png转webp的减少率是差不多的。
3. 使用tinify压缩的png转jpg跟没有压缩的png转jpg的减少率是差不多的。

结论

1. 页面元素需要透明通道的，保留两种图片(webp和png)让页面做兼容处理,减少请求图片质量最少。其中webp是经过原图png转换而来，png是经过原图png压缩而来。
2. 页面元素不需要透明通道的，保留两种图片(webp和jpg)让页面做兼容处理,减少请求图片质量最少。其中webp是经过原图png转换而来，jpg是经过原图png转换而来。

设计方案

sequenceDiagram
用户->>终端: 输入指令
终端->>用户: 提供交互选择(a:压缩图片，b:添加图片类型)  
终端->>node脚手架: 传送指令 
node脚手架->>node脚手架: 根据当前终端执行的相对路径获取本地所有的图片url
alt a:压缩图片
node脚手架->>node脚手架: 根据当前终端执行的相对路径获取已经记录压缩过的图片文件saveFile.json
node脚手架->>node脚手架: 根据saveFile.json，获取需要压缩的图片url
node脚手架->>node脚手架: 调用tinify包进行图片压缩
node脚手架->>node脚手架: 更新saveFile.json文件
end
alt b:添加图片类型
node脚手架->>node脚手架: 过滤存在的图片类型，调用sharp包进行图片类型添加，
end

参考资料

熊猫api文档：tinypng.com/developers/…

熊猫key：tinify.com/dashboard/o…

熊猫压缩网站：tinypng.com/

sharpApi文档：sharp.pixelplumbing.com/api-constru…