前端批量压缩图片

发表于 | 更新于: | 分类于 |
字数统计: 438 | 阅读时长 ≈ 2

前端批量压缩图片

前端切图的时候，png 图片都比较大，一直使用的是 Tinypng 来压缩 png 图片，小图标sprite之后，图片数量还是至少在 20 以上，操作甚是麻烦。后来在使用 gulp 的时候，发现了一个批量压缩图片的神器 —— pngquant 。

先来看看一个 gulp 插件 gulp-imagemin

Install

    $ npm install --save-dev gulp-imagemin

Usage

    var gulp = require('gulp');
    var imagemin = require('gulp-imagemin');
    var pngquant = require('imagemin-pngquant');

    gulp.task('default', function () {
        return gulp.src('src/images/*')
            .pipe(imagemin({
                progressive: true,
                svgoPlugins: [{removeViewBox: false}],
                use: [pngquant()] //使用了 pngquant 压缩png图片
            }))
            .pipe(gulp.dest('dist/images'));
    });

gulp-imagemin 可以压缩几乎所有图片格式 PNG, JPEG, GIF and SVG，其中png压缩是使用了 pngquant ,需要先另外安装：

    $ npm install --save imagemin-pngquant

但是，图片其实并不需要每次构建都压缩，一般只需要在发布或测试的时候一次性压缩就可以了。 所以也可以不使用 gulp 工具进行图片压缩，直接使用 pngquant。

pngquant 使用起来也是很方便的，下载对应版本，windows下添加文件目录到系统环境变量，进入到相应目录，直接使用命令行 pngquant *.png 即可完成压缩，可以看到目录下生成后缀名为 -fs8.png 或 -or8.png的图片。

查看 Readme.md 配置相应参数

pngquant常用的主要参数

--quality min-max

类似JPEG的质量，设置0 ~ 100 的图片压缩质量。

    pngquant --quality=65-80 *.png

--ext new.png

设置输出压缩图片的文件名。如果不设置，则默认后缀为 -fs8.png 或 -or8.png。如果使用 --ext=.png --force，将会使用原文件名输出并覆盖原文件。

-o out.png or --output out.png

设置图片输出路径。

0%