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);
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章