gulp - Gulp 图像优化器（gulp-imagemin）未完全优化

Question

我正在使用 gulp 编译我的工作，最近我正在使用 gulp-imagemin 插件来优化图像，它的工作但仍未完全优化。在 Google PageSpeed Insights 上显示图像未完全优化。如何完全优化我的图像？请帮忙。这是我在 gulpfile.js 上使用的功能，它减少了大约 2-5% 的图像大小。但没有完全优化。

gulp.task('imgs', function () {
    gulp
        .src(paths.assets.images)
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            pngquant: true
        }))
        .pipe(flatten())
        .pipe(gulp.dest(paths.build + "/img"));
});

这是显示图像的 Google PageSpeed Insights 未优化的屏幕截图。

Answer 1

我刚刚遇到了同样的麻烦，我决定从默认的imagemin-jpegtran 转移到imageminMozjpeg插件。

首先你需要安装 imagemin-mozjpeg：

npm install --save imagemin-mozjpeg

然后将此行添加到您的 gulpfile.js 中：

var imageminMozjpeg = require('imagemin-mozjpeg');

并稍微更改您通过管道传输 imagemin 工具的代码

.pipe(imagemin(
    [imageminMozjpeg()],
    {verbose: true}         // Enabling this will log info on every image passed to gulp-imagemin
))

它还删除图像元数据。结果很神奇： gulp-imagemin 工作进程日志

Answer 2

这个工作好多了..

gulp.task('imgs', function () {
    gulp
        .src(paths.assets.images)
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(flatten())
        .pipe(gulp.dest(paths.build + "/images"));
});

Answer 3

将 gulp-image 与 imagemin jpegRecompress 插件一起使用。它给出了更好的结果。文件大小减少 70% 以上。您只需要注意错误处理，因为有时命令会失败。