Laya 图片压缩

参考
Web性能优化:图片优化
Android bitmap(二) 常见图片格式JPG PNG

一、PNG压缩方式

参考
图片压缩之 PNG
PNG图片压缩对比分析
1.有损压缩
根据资料显示,tinypng、pngquant、ImageAlpha、pngnq都是有损压缩,基本采用的都是quantization算法,将24位的PNG图片转换为8位的PNG图片,减少图片的颜色数;
2.无损压缩
pngcrush、optipng、pngout、advpng都是无损压缩,采用的都是基于LZ/Huffman的DEFLATE算法,减少图片IDAT chunk区域的数据。
一般有损压缩的压缩率会大大高于无损压缩。

二、Laya ide 发布压缩是有损压缩

使用LAYA IDE发布设置

可以看出,laya内置用pngquant来压缩图片,不过那些选项设置,真的没读懂。默认设置压缩出来的效果有问题

原图是没有那些红色条纹的

GOOGLE了一下,具体参数含义

pngquant的参数说明:
1.quality参数的作用是保证图片经过优化处理后,图片质量的取值范围(0~100)。取值越小,表示压缩比率越大,同时的图片的质量也就越差。在测试过程中发现,当设置最低取值为60或65时,部分图片的质量会严重下降,因此最终我选择了70作为最低值。
2.speed参数的设置决定了图片优化的执行速度,取值范围为1~10,默认值为3。其中10的执行速度最快,对应的压缩比率最小;而1的执行速度最慢,对应的压缩比率最大。在测试过程中发现,无论我设置哪一个值它们的执行时间都差不多,不过压缩比率确实1的最大,10的最小,最后我选择了一个较为折中的值:4。
实测效果:
在设置quality的取值范围为70~95,以及speed为4的情况下,可以在尽可能不影响图片质量的前提下去缩减文件的大小。
在测试过程中,我们以PNG-8品质为256的图片为例,最终的图片输出可以降低70%左右的大小(从3.78KB缩减到1.13KB)。

具体用法可参考一个不错的 png压缩工具 pngquant 使用介绍 批量压缩png

gulp脚本如下

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件

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

通过以上参数说明,我把quality从50分别改成60,65,70试了一下。问题又出现了,之前有张图700多K,能压缩到200多K。但改了这个quality之后,就不压缩了,还是700多K.没办法,自己去找tinypng压缩一下。

三、tinypng应该是最好的有损压缩

参考
图片压缩利器 —— TINYPNG 简介
gulp-tinypng-nokey
tinypng-nokey
自己搞了gulp脚本:

var gulp = require('gulp');
var tiny = require('gulp-tinypng-nokey');

gulp.task('image', function(cb) {
    gulp.src('src/*.{png,jpg,jpeg}')
        .pipe(tiny())
        .pipe(gulp.dest('dist'));
});

//var gulp = require("gulp");
//var tingpng = require('gulp-tinypng');

//gulp.task("image", function () {
//  return gulp.src("src/*.png")
//    .pipe(tingpng('xK_CkxhgEQL9X0TnpHsevcUF0ClL'))
//    .pipe(gulp.dest("dist"));
//});

gulp.task('default', ['image']);

tinypng尽量放到任务的最后一步,因为这个过程是要上传图片,再下载图片的,和网络稳定有关
脚本执行得很慢,因为要上传下载。压缩效果比pngquant还要小,红色的纹不见了。不过有个渐变光的背景图被压残了

光圈出问题了
不压缩是这样的
tinypng对比pngquant
三、推荐GUI工具limitPNG,支持有损和无损压缩

PNG 极限压缩工具 - limitPNG
gluttonyPNG
工具很好用,可惜没有找到脚本,无法集成到gulp里

四、找一个无损压缩的脚本

有损压缩的效果,接受不了。现在的目标就是找一个支持无损压缩的脚本!
使用gulp进行图片优化,作者提到了:

Smushit是Yahoo开发的一款用来优化PNG和JPG的插件,它的原理是移除图片文件中不必要的数据。这是一个无损压缩工具,这意味着优化不会改变图片的显示效果和质量。

var gulp = require('gulp');
var smushit = require('gulp-smushit');

gulp.task('smushit', function () {
    return gulp.src('src/*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('smushit-dist'));
});

但是我实测,仍然是有损压缩方式。和tinypng基本是一样的。
然后,找到了 imagemin-optipng

gulp.task('optipng', function(cb) {
    return gulp.src(resPath+'/**/*.*')
        .pipe(jsFilter)
        .pipe(imagemin({
            progressive: true,
            use: [imageminOptipng()]
        }))
        .pipe(jsFilter.restore)
        .pipe(gulp.dest('dist'));
});

和gluttonyPNG无损压缩结果一样的,不过执行速度却慢多了,当然方便在脚本中使用,所以最终采用了它。

五、jpg压缩

tinypng虽然名字带png,其实是能压缩jpg的。optipng就不行了。然后看了一下LAYA IDE,用的是guetzli
参考
Google Guetzli 开源新算法,可将JPEG文件缩小35%
Google开源JPEG压缩算法--Guetzli体验

此外,可能大家已经注意到Guetzli对png的图片压缩比高达89%,原因是

  1. 该图片为png类型的图片,而Guetzli算法针对的是jpeg图片进行压缩,官方文档中的说法是“sRGB profile with a gamma of 2.2”,而png图片除了rgb通道还有alpha通道,猜测可能是因为压缩算法的输出是jpeg,因此将alpha通道进行了过滤,才有如此高的压缩比。
  2. jpeg图片本身就是有损压缩的格式,而png是无损压缩的格式,因此用png图片做测试有更高的压缩空间。

我自己测试了一下,原图是362K。用tinypng可以压缩到72K,用guetzli压缩到174K。在不放大的情况下,是看不出区别的。当然放大到700%时,就能看出tinypng是有损压缩的

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminGuetzli = require('imagemin-guetzli');

gulp.task('default', () =>
    gulp.src('images/*')
        .pipe(imagemin([imageminGuetzli()]))
        .pipe(gulp.dest('dist/images'))
);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容