如何使用 gulp-imagemin + 插件获得最佳的 PNG 压缩?
How do I get the best PNG compression with gulp-imagemin + plugins?
我正在尝试获得压缩 png 的最佳设置。
我发现这里有一些适用于 imagemin 的插件:
https://www.npmjs.com/browse/keyword/imageminplugin
我尝试了所有 PNG 选项,但压缩率似乎很差。
- 示例图片原始大小 - 1.4MB
- TinyPNG.com - 413KB
- pngquant - 541KB
- pngout - 无法正常工作 - 请参阅 https://github.com/imagemin/imagemin-pngout/issues/2
- pngcrush - 992KB
- optipng(默认选项)- 906KB
- advpng - 906KB
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。您可以使用 imagemin-webp 插件和 gulp-rename 将图像流式传输到具有相同基本名称但不同扩展名的 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));
});
我正在尝试获得压缩 png 的最佳设置。
我发现这里有一些适用于 imagemin 的插件: https://www.npmjs.com/browse/keyword/imageminplugin
我尝试了所有 PNG 选项,但压缩率似乎很差。
- 示例图片原始大小 - 1.4MB
- TinyPNG.com - 413KB
- pngquant - 541KB
- pngout - 无法正常工作 - 请参阅 https://github.com/imagemin/imagemin-pngout/issues/2
- pngcrush - 992KB
- optipng(默认选项)- 906KB
- advpng - 906KB
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。您可以使用 imagemin-webp 插件和 gulp-rename 将图像流式传输到具有相同基本名称但不同扩展名的 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));
});