CODEWITHSUNDEEP
javascriptnode.jsgruntjsgrunt-contrib-imagemin
Theodore Steiner
Theodore Steiner

Reputation: 1605

Image compression with imagemin-contrib (Grunt)

I was wanting to test out the imagemin-contrib in Grunt.js. I selected three jpg random images (sizes: 44kb, 92kb, 77kb, respectively) and set up the folder and plugin.

When I ran the imagemin grunt task, I received a message saying the photos were optimized successfully, but the numbers showed only a 5kb or 10kb reduction in size for the first two photos, and the third wasn't changed at all.

I was wondering if this was normal for an "optimized image"? I was expecting a more drastic drop in size. Could it be that the images I selected were simply already optimized? Or could it be in how I have written the grunt command?

Below is the code I used to execute the grunt command:

module.exports = function(grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        //Image Min Plugin
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'photos/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'photos/optim/'
                }]
            }
        }


    });

    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('default', ['imagemin']);
};

Upvotes: 1

Views: 485

Answers (1)

kentor
kentor

Reputation: 18504

General information

Well that absolutely depends on the original state of these images. If they were already compressed (e. g. when exporting with photoshop) they can barely compressed further without having a loss in quality. So it's definetely possible that you won't profit a lot by the optimization. If these are uncompressed images however grunt-contrib-imagemin can help a lot.

The plugin does a great job for what it is supposed to do, but obviously it doesn't compress images if there's a loss in quality. Also it doesn't know if the image could be resized (which is often a very good compression). If you are looking for the best compression you could run pagespeed insights (https://developers.google.com/speed/pagespeed/insights/) which tells you if you can further losslessly compress the image and if you can optimize the images by uploading them in a different resolution. If you want/need more compression consider lossy compression, which can save lots of kbs with only a little loss of quality.

The optimizationLevel option:

Even though it won't affect the compression size much there is the optimizationLevel option which can be set to a level between 0 and 7. It enables a set of optimization operations and it is set to 3 by default. The higher you set the level the more computationally expensive the compression operation becomes (shouldn't matter anyways). So you can set it to 7 and see if how it affects the compression:

imagemin: {
            options: {
                optimizationLevel: 7
            }
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'photos/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'photos/optim/'
                }]
            }
        }

The optimization level 0 enables a set of optimization operations that require minimal effort. There will be no changes to image attributes like bit depth or color type, and no recompression of existing IDAT datastreams. The optimization level 1 enables a single IDAT compression trial. The trial chosen is what OptiPNG thinks it’s probably the most effective. The optimization levels 2 and higher enable multiple IDAT compression trials; the higher the level, the more trials.

Reference: https://github.com/gruntjs/grunt-contrib-imagemin

Upvotes: 1

Related Questions