Search code examples
gulpcompressionjpeg

gulp-image doesn't compress JPGs

gulp-image is compressing png files without any flaw but when it comes to the jpg format, it leaves them as they are. If it is of any help, here it is my configuration:

var gulp = require('gulp');
var image = require("gulp-image");
var imagemin = require('gulp-imagemin');
var jpegRecompress = require("imagemin-jpeg-recompress");
var mozjpeg = require("imagemin-mozjpeg");
var jpegoptim = require('jpegoptim-bin');


// Optimization tasks
// -------------------

gulp.task("images:minify", function () {
    return gulp.src("images_src/**/*")
        .pipe(imagemin([imageminMozJpeg()], {
            verbose: true
        }))
        .pipe(gulp.dest("images_src/compressed"));
});

gulp.task("images:compress", function () {
    gulp.src("images_src/**/*.*")
    .pipe(image({
        jpegRecompress: true,
        jpegoptim: false,
        mozjpeg: true,
        concurrent: 10
    }))
    .pipe(gulp.dest("tmp"));
})

And here's what the terminal outputs when I run `gulp-image`:
[14:57:29] Using gulpfile ~/code/udacity-responsive-images/p1-my-solution/gulpfile.js
[14:57:29] Starting 'images:compress'...
[14:57:29] Finished 'images:compress' after 23 ms
[14:57:32] ✔ fixed/smiley_face.png -> before=3.8 KB after=478 B reduced=3.34 KB(87.7%)
[14:57:33] - horses.jpg -> Cannot improve upon 149.26 KB
[14:57:34] - still_life.jpg -> Cannot improve upon 81.13 KB
[14:57:35] - grasshopper.jpg -> Cannot improve upon 234.97 KB
[14:57:38] - rosella.jpg -> Cannot improve upon 676.67 KB
[14:57:39] - postcard.jpg -> Cannot improve upon 486.93 KB
[14:57:39] - cockatoos.jpg -> Cannot improve upon 485.34 KB
[14:57:39] - volt.jpg -> Cannot improve upon 522.92 KB
[14:57:39] - sfo.jpg -> Cannot improve upon 492.9 KB
[14:57:42] ✔ fixed/flourish.png -> before=43.43 KB after=15.42 KB reduced=28 KB(64.5%)

Could you please help me?

Solution

  • I don't think there is anything wrong. The various jpeg compression algorithms have various settings where you can adjust how much to compress. The default settings for jpeg-recompress are:

    ['--strip', '--quality', 'medium', '--min', 40, '--max', 80]

    where the argument descriptions are:

    --quality               Set a quality preset: low, medium, high, veryhigh
--min                   Minimum JPEG quality
--max                   Maximum JPEG quality
--strip                 Strip metadata

    If you specify different quality, min and max values you will get different results. If gulp-image doesn't detect any compression (i.e. input size equals output size) for the given settings it will give you the Cannot improve upon message. The default settings gave:

    C:\a>gulp images:compress
[16:52:38] Using gulpfile ~\a\gulpfile.js
[16:52:38] Starting 'images:compress'...
[16:52:38] Finished 'images:compress' after 6.49 ms
[16:52:39] - cockatoos.jpg -> Cannot improve upon 485.34 KB

    While these settings:

    gulp.task("images:compress", function () {
  gulp.src("images/**/*.*")
    .pipe(image({
      jpegRecompress: ['--strip', '--quality', 'medium', '--min', 1, '--max', 2],
      jpegoptim: false,
      mozjpeg: true,
      concurrent: 10,
    }))
    .pipe(gulp.dest("tmp"));
});

    gives the following result:

    C:\a>gulp images:compress
[16:52:46] Using gulpfile ~\a\gulpfile.js
[16:52:46] Starting 'images:compress'...
[16:52:46] Finished 'images:compress' after 6.4 ms
[16:52:48] ✔ cockatoos.jpg -> before=485.34 KB after=84.93 KB reduced=400.42 KB(82.5%)

    Now the cockatoos look terrible though, but I guess you can play around to find decent settings. It looks like gulp-image works correctly from what I can see.

    Cockatoos