Use grunt to lossless image compression, grunt Lossless Image Compression

Use grunt to lossless image compression, grunt Lossless Image Compression

As a front-end engineer or web Development Engineer, pictures are something you cannot ignore. No book on optimization won't mention picture optimization.

In pagespeed, the first thing to do is to prompt you to optimize your images.

I have tried many times before to process png images. You can view previous blogs: optimizing the history of png images.

However, the previous method has two problems:

1. Mainly optimizing PNG Images

2. inefficient and not suitable for batch operations

To solve the appeal issue, we now use a new method to batch compress images.

This method is used, Grunt-contrib-imagemin

The procedure is as follows:

1, first you have to have nodejs environment, if you do not have, please refer to: https://nodejs.org/

2. Open node. js command prompt

3. Install grunt through npm if you do not have grunt. To install, see: http://www.gruntjs.net/

4. Create a folder. My personal opinion is that the folder you created will serve as a storage location for your compressed image, that is, a cache zone. When you want to compress some images, copy them and run the compression command. Instead of installing imagemin in your project directory every time

To install Grunt-contrib-imagemin, you must have grunt installed in the system. Therefore, refer to Article 1 first.

After you enter the command to install imagemin, the package will be downloaded from the remote server to your new directory.

5. Create a New Gruntfile. js file and open the directory you just created. Here is gruntImgmin.

Create the above js file in the root directory, and then create the grunt task:

Module. exports = function (grunt) {'use strict '; grunt. initConfig ({imagemin: {/* compressed image size */dist: {options: {optimizationLevel: 3 // defines the PNG Image optimization level}, files: [{expand: true, cwd: 'images/', src :['**/*. {png, jpg, jpeg} '], // optimize all the png, jpg, and jpeg images in the img directory. dest: 'images/' // Save the Optimized images, overwrite the old image with no prompt}] }},}); grunt. loadNpmTasks ('grunt-contrib-imagemin'); grunt. registerTask ('img ', ['imagemin']);};

In the above task, I wrote the original image folder and the target folder into the same one, that is, to overwrite the original image. If you don't want this, you can change the path by yourself.

6. After placing the image in the corresponding folder, enter the following command in the nodejs command line:

7. file comparison

The total file size before compression is 535 k, and the size after compression is 508 k, reducing the size by 47 k.

Because most of the compressed images are jpg, the compression ratio may not be very high. When there are many png images or a large number of overall files, this difference will be greater. The reduction of K has been much reduced, and the performance of your web page has been optimized.

Refer:

Http://www.zfanw.com/blog/gruntjs-optimize-image-size-loseless.html

Http://www.gruntjs.net/

Https://nodejs.org/