Grunt Batch lossless compression picture plug-in--grunt-contrib-imagemin

Photoshop cut out the picture, whether it is PNG or jpeg/jpg format, contains a lot of relevant information, or extra color values, these information and color values, the front end of the page is not useful, but increase the size of the picture, so Google pagespeed best practices suggest we use Jpegtran or Jpegoptim (Linux platform only) lossless compression of jpeg/jpg images, or in the case of PNG format, use OptiPNG or pngout compression. Reduce the size of the picture, you can reduce the size of the file downloaded by users, speed up page access.

But a few of the tools mentioned above are not easy to operate. Or we can use the online compressed image tool smush.it provided by Yahoo, but according to Google Pagespeed report, Smushit compressed pictures still have compressed space – I don't know who to listen to at the moment. Google Pagespeed dare to take the porcelain live, of course, there are diamond, if we have its browser plug-in, we can define the optimized file save location, but these file names are very long, we need to deal with, then Google's intentions are confusing.

Jpegtran/jpegoptim/optipng/pngout Of course is the ideal compression tool, but the operation is not very convenient, and there are cross-platform problems. But with grunt.js, we can use its plug-in Grunt-contrib-imagemin,imagemin package jpegtran/optipng function, can be batch, lossless compression image size.

If you do not understand grunt.js, you can see my last brief introduction.

Installing the Imagemin plugin

Switch to the project folder,

cd projectNamenpm install grunt-contrib-imagemin --save-dev

Configure compressed picture tasks

Next, configure the Gruntfile.js file to define the task that optimizes the picture size:

/*global module:false*/module.exports = function (grunt) {    ‘use strict‘;    grunt.initConfig({        imagemin: {            /* 压缩图片大小 */            dist: {                options: {                    optimizationLevel: 3 //定义 PNG 图片优化水平                },                files: [                       {                    expand: true,                    cwd: ‘img/‘,                    src: [‘**/*.{png,jpg,jpeg}‘], // 优化 img 目录下所有 png/jpg/jpeg 图片                    dest: ‘img/‘ // 优化后的图片保存位置，覆盖旧图片，并且不作提示                    }                    ]                }            },            });    grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);    grunt.registerTask(‘img‘, [‘imagemin‘]);};

To run the grunt imagemin command:

As you can see, the picture compression ratio is very impressive. Then use the Google pagespeed tool to detect, no longer remind us to compress the image.

Reprint: http://handyxuefeng.blog.163.com/blog/static/45452172201391415246847/

Grunt Batch lossless compression picture plug-in--grunt-contrib-imagemin