cocos 微信小游戏 无限制图片压缩批处理 (pngquant) 一键操作,覆盖原图

cocos 微信小游戏 无限制图片压缩批处理 (pngquant) 一键操作,覆盖原图

pngquant我的实际使用感觉与tinypng差距不大,有文档指出 tinypng使用的压缩方式包含pngquant,我的压缩比例在%60-%70

执行: gulp wechat-image 压缩替换./build/wechatgame/目录下的图片
gulp.js 中文网 这里查看gulp使用教程
pngquant 官网:

pngquant 使用中值切割量化算法的修改版本和附加技术来减轻中值切割的缺陷。
而不是分裂具有最大音量或颜色数量的盒子,而是选择盒子以最小化其中值的方差。
直方图是建立在基本感知模型的基础之上的,这样可以减少图像噪点区域的重量。
为了进一步改善颜色,在类似于梯度下降的过程中调整直方图(中值切割重复许多次,在表现不佳的颜色上重量更多)。
最后,使用Voronoi迭代(K均值)来校正颜色,这保证了局部最佳的调色板。
pngquant 在预乘alpha颜色空间中工作,以减少透明颜色的重量。
当重新映射时,误差扩散仅应用于若干相邻像素量化为相同值且不是边缘的区域。这避免了在没有抖动的情况下将视觉质量增加的区域。

.pipe(cache : cache 缓存以前压缩过的图片,极大提升压缩速度,不然每次都要重新压缩很慢的
gulp cleanCash 清除 cache缓存,之后执行压缩会重新压缩,不会使用缓存
例如quality参数值修改之后不清除缓存似乎不会重新压缩,需要清除掉缓存才能让参数值生效重新压缩

–quality min-max
Instructs pngquant to use the least amount of colors required to meet or exceed the max quality. If conversion results in quality below the min quality the image won’t be saved (if outputting to stdout, 24-bit original will be output) and pngquant will exit with status code 99.
min and max are numbers in range 0 (worst) to 100 (perfect), similar to JPEG.
pngquant --quality=65-80 image.png

quality 影响压缩比例,推荐50-50

gulpfile.js:

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

const print = require('gulp-print').default;const gulpPngquant = require('gulp-pngquant');

var through = require('through2');gulp.task('wechat-image', function ( cb ) {
    gulp.src(['./build/wechatgame/**/*.{png,jpg,gif,ico}'])
    // .pipe(print(filepath => `built: ${filepath}`))
    //     .pipe(function(){
    //     return through.obj(function (file, enc, cb) {
    //         console.log(file.path);
    //         this.push(file); // 需要push一下,不然后续的pipe不会处理这个文件
    //         return cb();
    //     });
    // }())
        .pipe(cache(gulpPngquant({ // pngquant 压缩图片 参数quality:'50-50' 
            quality: '50-50'
        })))
        .pipe(gulp.dest('./build/wechatgame'))
        .on("end", cb);
});

gulp.task('cleanCash', function (done) {
    return cache.clearAll(done);
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章