以前对于图片压缩的认知是模糊的；大概是认为在尺寸上肯定是缩小的，但是对于有损还是无损倒真是没有探究过，想来是觉得无损压缩不够有力，要有大比例压缩则一定是有损的，而自己内心是不怎么接受有损压缩的。
最近一直关注网站性能，自然提到图片压缩，看看 GTmetrix 的建议；
优化图片的建议
Optimize images
Reduce the load times of pages by loading appropriately sized images.
- Reduce file sizes based on where images will be displayed
- Resize image files themselves instead of via CSS
- Save files in appropriate format depending on usage
- Cost benefit ratio: high value
- Access needed
优化前的截图
Relative Score：The average score for this recommendation is **68%**
优化后的截图
PageSpeed Score 分数高了（Optimize images Grade 由 F17 变为 A100）；Page Load Time 是下一步调整重点
图片格式的选择
建议使用 jpeg，png，gif，而 bmp、tiff 就不要使用了；
目前 我们的图片格式：(.(png|jpg|gif))；
绝大部分文件 png 格式；很少部分 jpg 和 gif，比如大文件 jpg，而 gif 小动画；
如何压缩？
- 使用 gulp-imagemin；
- Minify PNG, JPEG, GIF and SVG images；
- 无损压缩；
- 大约能压缩20%左右；
- 可以考虑将压缩后的图片放到 src 入库，而非每次在 dist 压缩；
gulp-imagemin 使用示例代码
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
gulp.task('default', () =>
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
- 一般格式：
imagemin([plugins], [options]) - plugins 默认：
[imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo()] - 支持 3 种：
imagemin([imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng()],{verbose:true}) - 写成
imagemin([],{verbose:true})就什么都不会压缩了；
