Skip to content

图片的合并和压缩

Posted on:February 26, 2016

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

图片合并

说明:这里的教程基于 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图片的方法:

安装 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'));
});