图片的合并和压缩

主要说一下图片合并和图片压缩的方法。

图片合并

说明：这里的教程基于 windows 环境，以及认为你已经大概知道gulp的使用方法。

为了减少图片的请求次数，可以把多张图片合并成一张图片，合并的图片叫雪碧图，也可以叫精灵图。以前是依靠 ps 一张张图片手工合并在一起，现在可以把需要合并的图片放在同一个文件夹，然后通过工具生成雪碧图以及样式文件。

首先需要先下载安装GraphicsMagick和ImageMagick。（这里说下为什么需要安装这两个软件，因为sprity默认使用的图片引擎是lwip，而在windows环境下，lwip是个坑，很难安装成功，所以把引擎换成gm，也就需要安装前面那两个软件，当然如果你是mac环境，可以选用lwip的引擎。）

安装成功之后，请重启一下电脑。接着安装sprity和sprity-gm。

$ npm install sprity
$ npm install sprity-gm

接着在gulpfile.js里写一个合并的任务：

gulp.task('sprites', function(){
    var sprity = require('sprity');
    sprity.src({
        name: 'icon',  //需要合并的图片文件夹的名称
        src: 'path/*.png', //图片的路径
        style: '_icon.scss', //定义生成的样式文件名
        format: 'png', //指定需要合并的图片的格式
        engine: 'gm', //设定图片引擎
        'gm-use-imagemagick': true,
        orientation: 'binary-tree',  //合并图片的排列方式
        template: './sprity-css.hbs', //生成样式的模板
        processor: 'scss' //设定生成样式的格式
    })
    .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/'))); //生成的雪碧图的存放位置和样式的存放位置

});

具体的配置可以参考sprity的README

最后在命令行中输入命令：

$ gulp sprites

done.

图片压缩

先说下jpeg格式的图片，尽可能的压缩图片大小，其实jpeg的格式是比较容易压缩的，在存储为 web 所用格式的时候，选择一下图片的质量或品质就可以了，选择“非常高”或者“高”就可以了，也就是品质 60 到 80 之间，尽量保证图片是小于300kb的。

尺寸中或大的jpeg格式的图片请勾选连续模式，而不是优化模式。为什么呢，因为优化模式的图片加载方式是从上到下加载，而连续模式的加载方式是从低像素到高像素加载的。

png格式的图片压缩会比较难一点，和jpeg一样，尺寸中或大的请交错模式，交错模式和连续模式一样，加载方式是从低像素到高像素加载的。

下面有几种压缩png图片的方法：

• 可以上传png图片到tinypng,但这个方式有个缺点，没办法控制压缩的量，压缩太重了，图片质量太差。
• 可以利用imagemin-pngquant插件进行压缩，可以选择压缩的量，比第一种方法好点。
• 但有些png图片在必须保证图片质量的前提下，是确实没办法压缩的，但还是可以略微调整下。图像-调整-色调分离。利用 photoshop 里面的色调分离，可以压缩一下图片的大小。

安装 imagemin-pngquant：

$ npm install imagemin-pngquant

imagemin-pngquant 的写法（具体可以参考README）：

//图片压缩
gulp.task('imagemin', function(){
    var pngquant = require('imagemin-pngquant');
    gulp.src('app/common/img/src/*.png')
        .pipe(pngquant({quality: '60', speed: 4})())
        .pipe(gulp.dest('app/common/img/min'));
});