Use grunt to lossless image compression, grunt Lossless Image Compression

Source: Internet
Author: User

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/



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.