Laya 图片压缩_laya 图片压缩失真-CSDN博客

一、PNG压缩方式

参考
图片压缩之 PNG
PNG图片压缩对比分析
1.有损压缩
根据资料显示，tinypng、pngquant、ImageAlpha、pngnq都是有损压缩，基本采用的都是quantization算法，将24位的PNG图片转换为8位的PNG图片，减少图片的颜色数；
2.无损压缩
pngcrush、optipng、pngout、adv*ng都是无损压缩，采用的都是基于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%，原因是

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

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