遇到的问题
昨天闲来无事,想起了雅虎的前端优化十四条军规,然后安装了一个PageSpeed插件,检测了下自己的网站,其中有一个优化图片的建议,让我比较感兴趣。
从上图可以看到,按照谷歌的建议,压缩后的大小减少31%,还是比较可观的。
其实这个问题,很久之前就遇到过(大概2年前),当时Google还没有PageSpeed这个Chrome插件,也是提示我优化图片。后来用ps调整图片的分辨率等信息,图片大小也确实变小了。然后就没有继续思考这个问题。
使用ps优化图片固然是一种解决办法,但是实际项目中,图片都是由美工制作的。有些图片还是会有压缩的空间。如果把能压缩的图片用ps一个个打开,在优化的话,又会很麻烦,so,自动化
imagemin
用过了Grunt之后,再来使用imagemin灰常简单。
执行命令npm install grunt-contrib-imagemin --save-dev
安装imagemin,如下图
然后配置下Gruntfile.js。没按照官网给出的Example config配置,找了个简单的
module.exports = function (grunt) {
grunt.initConfig({
imagemin: {
dist: {
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
files: [{
expand: true,
cwd: 'imagemin/', // 图片在imagemin目录下
src: ['**/*.{png,jpg,jpeg}'], // 优化 imagemin 目录下所有 png/jpg/jpeg 图片
dest: 'imagemin/' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
}]
}
},
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
};
最后,执行命令grunt
,然后就可以啦!有多少张图片,都可以自动压缩完成了。
压缩之后的效果如下图,然后在PageSpeed中就不会给我优化图片的建议了~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。