前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » 如何使用Gulp裁剪和压缩图片

如何使用Gulp裁剪和压缩图片

发布者:前端集合 // 发布时间:2015-01-22 21:45:00 // 分类:前端集合 // 访问: 11,105 次 // 热度: 0人参与

利用Gulp裁剪和压缩图片

自从开始使用scss后,都是用grunt来实时监听并编译。偶然试了下用gulp来实时编译scss,发现速度比grunt快了不是一点点。同等情况下,grunt编译要花十几秒, 而gulp只要几十毫秒。所以,我慢慢转投了gulp阵营。

有点扯远了。今天主要记录下自己使用gulp裁剪和压缩图片的过程。有个站点有上千张图片,很多图片宽高和体积都太大,但我自己又不想多装一个WordPress插件去压缩它们,所以想到了用gulp来处理,然后再替换显示。

一、先在package.json里声明依赖

{
"dependencies": {
    "gulp": "latest",
    "gulp-imagemin": "latest",
    "gulp-image-resize": "latest",
    "imagemin-pngquant": "latest"
  }
}

二、指定数值或比例裁剪宽高:gulp-image-resize

这里我只想指定宽度,然后高度自动,所以就这么设置了。更多设置请参考上面的链接。

注意该插件需要依赖:imagemagick(或graphicsmagick)和imagemin-pngquant

gulp.task('image-resize', function () {
    return gulp.src('www/screen/*.+(jpeg|jpg|png)')
        .pipe(imageResize({
            width: 1000
        }))
        .pipe(gulp.dest('www/screen/'));
});

三、压缩图片体积:gulp-imagemin

可以压缩gif,png和jpg。

用这个插件压缩jpg图片,体积压缩得越小,图片就越不清晰,所以不建议把jpg图片压缩质量设置得过低,60%-80%为宜。

而把png24压缩成png8,提及一般可以减少50%以上。

下面主要讲下如何把png24转成png8:

gulp.task('images-opt', function () {
    gulp.src('www/screen/*.+(jpeg|jpg|png)')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant({quality: '65-80'})]
        }))
        .pipe(gulp.dest('www/screen/'));
});

四、压缩效果

tinypng.com是一个非常不错的网站,同样的图片通过这个网站和上述gulp方法压缩后,得到的体积差不多一直,质量也不错,压缩算法是一样的也说不定。

另外,近千张总大小为76M的图片,通过gulp压缩(只压缩没有裁剪)后大小只有48M,随机抽取一些图片查看后质量可以接受。高质量和低体积不能兼得,只能做出合适的权衡。

Tags: grunt, gulp, imagemin-pngquant, gulp-imagemin, gulp-image-resize, gulp图片裁剪, gulp图片压缩, gulp png24转png8

ThinkJS入门学习实例(1)>>  << 如何在VPS上安装Node.js
Top