Proper jpeg optimization via Gulp?

Question

I'm going to find the best solution for jpg optimizing process, based on Gulp plugins (such as imagemin package). My goal is to compress jpg file like Save For Web in Adobe Photoshop - progressive: true and quality: 61.

I have one image, saved in several ways:

01.jpg (Photoshop -> ctrl+s, best quality(12), format: basic (standard)) - 89.5 KB
02.jpg (Photoshop -> ctrl+s, high quality(8), format: basic (optimized)) - 51.1 KB
03.jpg (Photoshop -> ctrl+s, medium quality(6), format: progressive) - 47.5 KB
04.jpg (Photoshop -> Save For Web, high quality(61), format: progressive) - 29.6 KB

So, my goal is to compress jpg via Gulp like 04.jpg.

The original image is 01.jpg (89.5 KB).

Results of imagemin-jpegtran and imagemin-jpegoptim aren't good enough, cause optimization level is far from Photoshop's Save For Web:

imagemin (jpegtran inside) -> 51.7 KB

imagemin-jpegoptim - couldn't to set up (any help?)

module.exports = function (gulp, plugins, config) {
var jpegoptim = require('imagemin-jpegoptim');

return function(){

    gulp.src(config.assets.images.temp + '**/*.jpg')
        .pipe(jpegoptim({
            progressive: true
        })())
        .pipe(gulp.dest(config.assets.images.src));
}
};

Error: write EOF

module.exports = function (gulp, plugins, config) {
var jpegoptim = require('imagemin-jpegoptim');

return function(){
    gulp.src(config.assets.images.temp + '**/*.jpg')
        .pipe(plugins.imagemin({
            progressive: true,
            use: [
                jpegoptim({
                    max: 61
                })()
            ]
        }))
        .pipe(gulp.dest(config.assets.images.src));
}
};

Brokes image (100% of minifying - broken file)

I tryed to work with imagemin-jpeg-recompress, but it throws an error:

Error: Premature end of JPEG file
JPEG datastream contains no image

So my question is...

How to achieve the same results via Gulp, as through Photoshop Save For Web?

user3344003 user3344003 · Accepted Answer · 2015-04-10T15:52:55

First of all, there is no such thing as "quality" in JPEG. Quality is a mechanism many JPEG encoders use to select quantization tables. Unless two encoders select the exact same quantization tables for the same quality values, you get different results using the same "quality" on different encoders.

You need to find the right combination of compression settings that gets what you want as implemented in GULP.

The settings you want are: Progressive or Sequential. Progressive JPEG often compresses better than sequential. If you use progressive, you can adjust the number of scans.

Adjusting sampling can improve compression.

The quantization table selection can also improve compression.

Your encoder may allow you to choose between dynamically (better but slower) and statically (worse but faster) created huffman tables.

You have to play with all those settings to get the result you want.

Proper jpeg optimization via Gulp?

2 Answers