Using Imagemin with Grunt

Install the Imagemin Grunt plugin

This Glitch already contains grunt and grunt-cli for you, but you'll need to install grunt-contrib-imagemin.

  • Click the Remix This button to make the project editable.

  • Click the Status button.

  • Then click the Console button.

  • Lastly, type this command into the console:
npm install --save-dev grunt-contrib-imagemin

Setup the Imagemin Grunt plugin

  • To add the configuration for Imagemin, first replace the //Add configuration here comment in gruntfile.js with this code block:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

This code block tells Grunt which files should be compressed with Imagemin.

  • dynamic indicates that the list of files to compress will be dynamically generated by matching the filenames against the specified file pattern.

  • The file pattern {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} will match all the JPEG and PNG images in the images/ directory.

Have more questions about this? You can read more about the Grunt file object here.
  • Load the Imagemin task by adding this line immediately before grunt.registerTask(...):
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Lastly, add Imagemin as the default Grunt task by replacing the /* list plugins here */ comment with 'imagemin'. That line should now look like this:
grunt.registerTask('default', ['imagemin']);

✔︎ Check-in

The complete gruntfile.js file should now look like this:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Customize your Imagemin Configuration

imagemin-pngquant is a plugin for specifying compression quality levels.

To add imagemin-pngquant to this project:

  • Make sure the Console is open.

  • Install the plugin using npm by typing the following command into the console:
npm install --save-dev imagemin-pngquant
  • Declare the imagemin-pngquant plugin by adding this line to the top your gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Add settings for compressing PNG images by adding an options property to the imagemin object. That options property should look like this:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: '50'}),
      ]
    },
    dynamic: {
  ...

This code tells Grunt to compress PNGs to a quality of 50 (0 is the worst; 100 is the best) using the imagemin-pngquant plugin.

✔︎ Check-in

Your gruntfile.js file should now look like this:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: '50'}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

But what about JPEGs? The project also has JPEG images, so you should specify how they are compressed as well.

Customize your Imagemin configuration (continued)

The imagemin-mozjpeg plugin can be used to compress JPEG images.

  • Make sure the Console is open.

  • Install the plugin using npm by typing the following command into the console:
npm install --save-dev imagemin-mozjpeg
  • Declare the imagemin-mozjpeg plugin by putting this line at the top your gruntfile.js.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • Next, add mozjpeg({quality: '50'}) to the array in the options object. That array should now look like this:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: '50'}),
        mozjpeg({quality: '50'})
      ]
    },
    dynamic: {

✔︎ Check-in

Your gruntfile.js file should now look like this:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: '50'}),
        mozjpeg({quality: '50'})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Re-run Grunt & verify results with Lighthouse

  • Make sure the Console is open.

  • Run Grunt by typing the following command into the console:
grunt

When Grunt completes you should see a message like this in console:

Minified 6 images (saved 667 kB - 66.5%)

Hooray! These results are much better.

Lastly, it's a good idea to use Lighthouse to verify the changes that you just made. Lighthouse's "Efficiently encode images" performance audit will let you know if the JPEG images on your page are optimally compressed.

  • Click on the Show Live button to view the live version of the your Glitch.

  • Run the Lighthouse performance audit (Lighthouse > Options > Performance) on the live version of your Glitch and verify that the "Efficiently encode images" audit was passed.
Passing 'Efficiently encode images' audit in Lighthouse

Success! You have used Imagemin to optimally compress the images on your page.