Gulp 图像优化器 (gulp-imagemin) 未完全优化

Question

我正在使用gulp编译我的作品，最近我正在使用gulp-imagemin插件来优化图像，并且它可以工作但仍然不完全optimize.On Google 显示图像的 PageSpeed Insights 没有完全 optimize.How 来完全优化我的图像？请帮忙。这是我在 gulpfile.js 上使用的功能，它减少了大约 2-5% 的图像 size.But 没有完全优化。

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

这个效果好多了..

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 2

我刚刚遇到了同样的麻烦，我决定从默认的 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 3

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

Gulp 图像优化器 (gulp-imagemin) 未完全优化

Gulp image optimizer(gulp-imagemin) not fully optimize

gulp

gulp-imagemin