前端性能优化之图片压缩详细流程（工作实用）

前端性能优化之图片压缩详细流程

最近在工作中，对于图片压缩效果的需求比较迫切，在这里记录一下目前为止，优化多次的图片压缩流程。

在实际工作中，我们发现，只用一种方法并不能满足实际需要，总有一些图片比较特殊，所以我们选择使用gulp构建工具和手工在线压缩结合。

工作目录

这里简略写了一下必要的文件夹和文件，实际情况文件层次可以更加丰富

myDemo
-----dist
		-css
    	-img
    	-js
    	html
-----src
    	-less
    	-img
    	-js
    	html
-----gulpfile.js
-----package.json

gulp插件使用

一、 gulp-imagemin：

1. 支持的图片格式：png，jpg，svg和gif
2. 优势：压缩的常用格式多，压缩速度快，结合imagemin-pngquant imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo 可以提升总体压缩比，这也是这个插件为什么受众较多的原因。
3. 缺点：有些时候，对gif动图的压缩比例微弱，甚至于有些png或者jpg图压缩不了。

二、gulp-tinypng-nokey：

1. 支持的图片格式：png，jpg
2. 优势：突破使用官网api每月500张的限制，可以不用key，压缩比例高。
3. 缺点：不能压缩gif，在我们的工作中，gif的压缩有很大需求，所以这点就限制了我们的使用。限制于网速，网速慢时，压缩时间较长，在实际工作中，不是很稳定。

流程图演说与展示

流程主要分为两大块：gulp构建工具压缩和手工在线压缩：

一、gulp构建
1.使用gulp-imagemin对所有格式（工作中实际格式为gif，png，jpg）图片进行总体压缩

2.由于gulp-tinypng-nokey不能压缩gif，所以在上一步之后我们要程序判断图片格式，将图片分为gif和非gif进行下一步处理。

• 2.1 gif组图进行程序判断图片大小，这里我们设的值为1.5m，可以灵活调整
• 2.2 非gif组图（jpg，png）进行程序判断图片大小，这里我们设的值为200kb，可以灵活调整。

3.接上2中判断完图片临界值之后，又分成两种情况：

• 3.1 gif组图中，大于1.5m的gif图片，放入一个数组list；小于1.5m的gif图片，也就是大小我们的压缩要求的gif图，直接放入dist/img目录中。
• 3.2 非gif组图（png，jpg）中，大于200kb的图，开启gulp-tinypng-nokey的压缩，压缩之后再次进行程序判断图片大小，仍旧大于200kb的图，放入一个数组list,已经小于200kb的图就放入dist/img目录中。

4.将所有图片放入dist/img目录中或数组list之后，gulp构建结束。

如果此时的list数组为空，也就是所有图片都已经最优化了，图片压缩流程结束。
但如果list数组不为空，则需要进行手工在线压缩：

二、进行手工在线压缩

在这里我推荐几个在线压缩工具：
1.Tiomg： https://www.tiomg.org/
Tiomg是一个免费在线图片压缩工具网站，上次图片可达30M，不限图片数量。

2.Compressor：https://compressor.io/compress

3.Giftofspeed： https://www.giftofspeed.com
Giftofspeed有一个功能，可以输入你的网址(这里选用了不二家的首页测试)，然后这个工具会建议对图片进行优化，这样可以发现很多问题。
测试地址：https://www.giftofspeed.com/image-delivery/

如图，