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

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

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

在实际工作中，我们发现，只用一种方法并不能满足实际需要，总有一些图片比较特殊，所以我们选择使用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
<