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 working process log

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％以上。您只需要注意错误处理，因为有时命令会失败。