Gulp optimize images with imagemin

Question

I'm trying to Gulp optimize my images with imagemin

https://www.npmjs.com/package/gulp-image-optimization

I have problem to find a good documentation which can show me exact parameters and different option. For now there is not a lot of gain in my optimization:

var imageop = require('gulp-image-optimization');
var pngquant = require('imagemin-pngquant');
var imageminJpegoptim = require('imagemin-jpegoptim');

var baseUrl = "web/assets/";
var imgSrc = baseUrl + "src/images/";
var imgDist = baseUrl + "dist/images/";

gulp.task('img', function(cb) {
    gulp.src([imgSrc + '**/*.png', imgSrc + '**/*.jpg', imgSrc + '**/*.gif', imgSrc + '**/*.jpeg'])
        .pipe(imageop({
            optimizationLevel: 10,
            progressive: true,
            interlaced: true,
            use: [pngquant(), imageminJpegoptim()]
        }))
        .pipe(gulp.dest(imgDist)).on('end', cb).on('error', cb);
});

Did I missed something in the config?

Side note: you can tighten up your `gulp.src` with `imgSrc + '**/*.(png|jpg|gif|jpeg)'` (though if you follow my answer you don't have to specify the file extensions) — henry, Feb 18 '17 at 19:05

henry · Answer 1 · 2017-02-18T19:06:37.083

I'm assuming you have reasons to expect more significant size decreases than you're getting. In that case, my bet is the trouble is old tech.

The gulp-image-optimization you're using appears to rely on the old imagemin, which hadn't broken each type of optimization into its own plugin (I say "appears" because it's years old, that's what's reflected in gulp-image-optimization's documentation, and that's how imagemin used to work if I'm remembering right).

The recommended plugin these days, and the one linked in imagemin's documentation, is gulp-imagemin.

Using gulp-imagemin, your basic setup will be something like

const gulp = require('gulp'),
      imagemin = require('gulp-imagemin');

gulp.task('default', (cb) =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images')).on('end', cb).on('error', cb)
);

(That code taken directly from the gulp-imagemin documentation, with your error callback added.)

gulp-imagemin includes plugins for png(optipng) and jpg (jpegtran) optimization by default.

Gulp optimize images with imagemin

1 Answers1