Image optimisation to reduce site load time using imagemin

Last updated on August 28th, 2020 at 05:14 pm

In this post I am going to explain How to optimise your website images using NodeJs. If you have any online E-Store or you ever worked on any eCommerce website you know that product image is very important to let customers know about your product and convince the customer to buy that product. But if your product image are not optimised first it will take long time to load and your user leave and also if the quality of the image is not good enough then also customer not going to buy your product, so here we have to keep both things in our mind optimise image to load fast and also keep its quality high so user can easily understand and like your product. There are lots of tools like Cloudinary, TinyPng etc. which can also optimise your image. But if you need your own system then this post is for you. 

Optimise  image using NodeJs Imagemin plugin

Before we start creating our node application I hope you have good knowledge of NodeJs, NPM and Grunt. If you haven’t use Grunt please check out Grunt get started guide. Now follow bellow simple steps to create a simple application.

Step 1: Create your project directory name it whatever you want 🙂 . In my case I name it ImageProcess.

Step 2: Now create two files inside your ImageProcess first file package.json  and second is gruntfile.js.

Step 3: Open package.json file and paste bellow code inside it.

{
  "name": "ImageProcess",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-newer": "^1.3.0",
    "imagemin-mozjpeg": "^5.1.0"
  }
}

After this, we also need to install Grunt CLI tool and other dependencies, open terminal inside ImageProcess and run below command

npm install -g grunt-cli

Now we can install imagemin plugin to install run below command

npm install grunt-contrib-imagemin --save-dev

Now open gruntfile.js and paste, bellow code in it.

var mozjpeg = require('imagemin-mozjpeg');

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    
    imagemin: {                          // Task
        dynamic: {                         // Another target
            options: {                       // Target options
                optimizationLevel: 2,
                svgoPlugins: [{ removeViewBox: false }],
                use: [mozjpeg()],
                progressive: true,
                cache: false
            },
            files: [{
                expand: true,                  // Enable dynamic expansion
                cwd: 'src/',                   // Src matches are relative to this path
                src: ['**/*.{png,jpg,gif}', '!dist/**'],   // Actual patterns to match
                dest: 'dist/'                  // Destination path prefix
            }]
        }
    }

  });

  // Load the plugin that provides the "uglify" task.
  //grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-newer');

  // Default task(s).
  grunt.registerTask('default', ['imagemin']);
};

After paste creates two new folders inside project src and dist. Add some images inside your src folder which we can optimise and save it into dist folder. Now run bellow command to optimise your images.

grunt imagemin

After running above command you get output like shown in bellow image, which shows how much memory you save

With the help of above code you can optimise your image without losing its quality and the reduce load time of your speed.  Hope this post help you. If this post helps you please like and share trinitytuts 🙂 .

Note: If you are using Ubuntu 16.10 or greater you manual need to install libpng12-0 library. In latest version libpng is officially removed. 

If you get any other error please post in the comment.