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

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

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

1 2 3 4 5 6 7 8

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

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

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

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

mac安装方法：

 brew imagemagick

1 2 3 4 5 6 7

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：

1 2 3 4 5 6 7 8

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

转载于:https://www.cnblogs.com/donglegend/articles/4797992.html