图片压缩工具：grunt-contrib-imagemin

　　我们平时使用Photoshop 切出的图片，都含有一些不需要的信息或者多余的颜色值，这些信息和颜色值，对网页显示并没有用处，反而增加图片大小，Google Pagespeed 建议我们对于JPEG文件，使用jpegtran或jpegoptim（仅适用于Linux；使用--strip-all选项运行）。对于PNG文件，使用OptiPNG或PNGOUT。减小图片大小，就可以减少用户下载的文件大小，加快页面访问速度。

　　对于不同格式的图片，我们需要用pegtran/jpegoptim/OptiPNG/PNGOUT 的工具，这样对于前端开发费时费力，grunt-contrib-imagemin封装了这些压缩功能；大大方便了我们优化的工作.

　　安装：npm install grunt-contrib-imagemin --save-dev

　　配置：详细见https://github.com/gruntjs/grunt-contrib-imagemin

　　代码例子：

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        imagemin: {
            /* 压缩图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定义 PNG 图片优化水平
                },
                files: [{
                    expand: true,
                    cwd: 'imgs/',
                    src: ['**/*.{png,jpg,jpeg,gif}'], // 优化 img 目录下所有 png/jpg/jpeg/gif图片
                    dest: 'imgs/' // 优化后的图片保存位置，覆盖旧图片，并且不作提示
                }]
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('img', ['imagemin']);
};

　　存在的问题：

　　1、0.9.2版本，在win7系统32位，64位有问题，无法压缩jpg,运行的时候报错.

　　可以在https://github.com/imagemin/jpegtran-bin/releases下载文件后获取里面的

　　jpegtran-bin-2.0.2->jpegtran-bin-2.02->vendor-win-x64里的两个文件:

　　jpegtran.exe libjpeg-62.dll,覆盖到node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\jpegtran-bin\vendor\下即可

　　2、压缩后的png图片，半透明的效果在IE6下显示有问题，压缩前正常，压缩后图片消失不可见，其他浏览器正常。原因不详。0.9.2出现，在最新版本未测试过。

　　3、最新版本貌似0.9.4没这个问题，但是默认压缩后的大小却相差很多，具体原因不详。

来源：https://www.cnblogs.com/tellme/p/4368671.html

标签

图片压缩

png