Grunt: Image Minification/Compression

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

				
				  "devDependencies": {
				    "grunt": "~1.0.1",
				    "grunt-contrib-imagemin": "^1.0.1"
				  }
				
			

• optipng (for compressing PNG images)
• jpegtran (for compressing JPG/JPEG images)
• svgo (for compressing SVG images)
• gifsicle (for compressing GIF images)

PNG Image Minification

We will optimize the PNG image files located inside the src/img directory and output the optimized image files into the dist/img directory. Configuration for this minification task inside the grunt.initConfig() method follows the structure given below

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
					        imagemin: {
					            png: {
					              options: {
					                optimizationLevel: 7
					              },
					              files: [
					                {          
					                  expand: true,            
					                  cwd: 'src/img/',
					                  src: ['**/*.png'],                
					                  dest: 'dist/img/',
					                  ext: '.png'
					                }
					              ]
					            }      
					        }
						});	

					    grunt.loadNpmTasks('grunt-contrib-imagemin');	
					}
					
				

The optimizationLevel field can take values from 0 to 7; the default value is 3. In the last line, the plugin name grunt-contrib-imagemin is passed as an argument to the grunt.loadNpmTasks() method and invoked.

The minification task can now be run typing the command

					grunt imagemin
				

Results

Compare the two images below. The first PNG image below is to be optimized.

Young Garo Girls during A·we Festival at Resubelpara, North Garo Hills, Meghalaya by Vishma Thapa, CC BY-SA 4.0

The size of the original PNG image (above), which is 284.6 kB, is reduced to 248.6 kB (below) after optimization (below).

JPEG/JPG Image Minification

The configuration for optimizing JPEG/JPG images is similar as that for PNG

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
					        imagemin: {
					            jpg: {
					              options: {
					                progressive: true
					              },
					              files: [
					                {       
					                  expand: true,          
					                  cwd: 'src/img/',
					                  src: ['**/*.jpg','**/*.jpeg'],     
					                  dest: 'dist/img/',
					                  ext: '.jpg'
					                }
					              ]
					            }
					        }
						});
						
					    grunt.loadNpmTasks('grunt-contrib-imagemin');
						
					}
					
				

Setting Task to Default

A task, or a set of tasks, can be run together under an "alias task". The grunt.registerTask function serves this purpose. The first argument is the task name. In the example below, we define a default task name. The second argument is an array of tasks to run. We add our minification task (imagemin) into this array.

						
						grunt.registerTask('default', ['imagemin']);
					
				

The default task defined can be run just by typing grunt into the terminal without specifying a particular task. In our case, the below command will run the imagemin task

					grunt
				

Notes

• cwd field is the shortened form of 'current working directory'.