Siberiawolf +

grunt 自动化之压缩图片

遇到的问题

昨天闲来无事,想起了雅虎的前端优化十四条军规,然后安装了一个PageSpeed插件,检测了下自己的网站,其中有一个优化图片的建议,让我比较感兴趣。 优化图片建议 从上图可以看到,按照谷歌的建议,压缩后的大小减少31%,还是比较可观的。
其实这个问题,很久之前就遇到过(大概2年前),当时Google还没有PageSpeed这个Chrome插件,也是提示我优化图片。后来用ps调整图片的分辨率等信息,图片大小也确实变小了。然后就没有继续思考这个问题。
使用ps优化图片固然是一种解决办法,但是实际项目中,图片都是由美工制作的。有些图片还是会有压缩的空间。如果把能压缩的图片用ps一个个打开,在优化的话,又会很麻烦,so,自动化

imagemin

用过了Grunt之后,再来使用imagemin灰常简单。
执行命令npm install grunt-contrib-imagemin --save-dev安装imagemin,如下图 安装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中就不会给我优化图片的建议了~ 压缩图片

参考连接

技术

项目