我正在尝试获得压缩png的最佳设置。
我发现这里有一些可用于imagemin的插件:
https://www.npmjs.com/browse/keyword/imageminplugin
我尝试了所有PNG选项，但压缩率似乎很差。
pngquant似乎具有最高的压缩率，(显然是最差的质量)，其质量与tinypng相似，但是仍然可以接近tinypng的数字。
本质上，我有3个问题:
问题1:
更改advpng和optipng的选项似乎都不会更改文件大小，这是一个示例，我可以正确使用它吗？
我猜想也许它根本没有使用我的设置，而是回到了默认设置？如果您发现这两个文件的大小相同!:
.pipe(imagemin(
imageminOptipng({
optimizationLevel: 4
})
))
问题2:
我在正确使用“pngout”吗？有我不知道的使用方法吗？他们页面上的示例似乎无效，此方法也无效:
.pipe(imagemin([
imageminPngout({
strategy: 1
})
]))
问题3:
有没有更好的方法来处理我尚未发现的png压缩？
理想情况下，我想以某种方式获得具有pngquant速率的方法，但是质量要好一些。
最佳答案
经过长时间的试验和错误，我设法获得了imagemin-pngquant插件，以生成与TinyPNG.com类似的小尺寸图像。仍然更大一点，但是图像的某些部分看起来比TinyPNG.com的结果更好。
输入图像大小:1.1MB
TinyPNG.com:223kb
imagemin-pngquant:251kb
我使用了下一个插件设置:
{
quality: '70-90', // When used more then 70 the image wasn't saved
speed: 1, // The lowest speed of optimization with the highest quality
floyd: 1 // Controls level of dithering (0 = none, 1 = full).
}
同样，从.png生成.webp图像，并以.png作为备份，将其提供给支持此格式的浏览器可能是一个好主意。有关.webp图像格式的更多信息:Google Developer Section
从优化的图像生成.webp(质量损失最小)后，图像大小为62kB。您可以使用带有gulp-rename的imagemin-webp插件，将具有相同基本名称但扩展名不同的图像流传输到dist文件夹。 gulp任务示例:
const config = require('./src/gulp/config.json');
const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const imageminWebp = require('imagemin-webp');
gulp.task('images', function () {
return gulp.src(config.src.images)
pipe(plugins.imagemin([imageminWebp({
method: 6,
})]))
.pipe(plugins.rename({ extname: '.webp' }))
.pipe(gulp.dest(config.dist.images));
});
关于gulp - 如何使用gulp-imagemin +插件获得最佳的PNG压缩？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39894913/