网站性能优化 の 图片压缩

以前对于图片压缩的认知是模糊的；大概是认为在尺寸上肯定是缩小的，但是对于有损还是无损倒真是没有探究过，想来是觉得无损压缩不够有力，要有大比例压缩则一定是有损的，而自己内心是不怎么接受有损压缩的。

最近一直关注网站性能，自然提到图片压缩，看看 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}) 就什么都不会压缩了；