Grunt Not Resizeing Images

Question

I'm trying to re-size and compress 8 images on a website so I resize and compress the images. However, when I implement the Grunt responsive images task it says success, but not for the parameters I have entered. Specifically, it indicates:

Running "responsive_images:dev" (responsive_images) task

Resized 8 files for 120x110

However, for the responsive images input, I have:

grunt.initConfig({
  responsive_images: {
    dev: {
      options: {
        engine: 'im',
        sizes: [{         
          width: 1600,
          suffix: '_large_2x',
          quality: 30
        }]
      },

      /*
      You don't need to change this part if you don't change
      the directory structure.
      */
      files: [{
        expand: true,
        src: ['*.{gif,jpg,png}'],
        cwd: 'images_src/',
        dest: 'images/'
      }]
    }
  },

How can I get Grunt to accurate resize the images according to the width, suffix, and quality shown?

The rest of the Grunt file states,

    // ...

    clean: {
      dev: {
        src: ['images'],
      },
    },

    /* Generate the images directory if it is missing */
    mkdir: {
      dev: {
        options: {
          create: ['images']
        },
      },
    },

    /* Copy the "fixed" images that don't go through processing into the images/directory */
    copy: {
      dev: {
        files: [{
          expand: true,
          src: 'images_src/fixed/*.{gif,jpg,png}',
          dest: 'images/'
        }]
      },
    },
  });

  grunt.loadNpmTasks('grunt-responsive-images');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-mkdir');
  grunt.registerTask('default', ['clean', 'mkdir', 'copy', 'responsive_images']);

};

I have included a screen shot of the file structure of the images. I just want them to appear in one of the directories, but they don't appear anywhere. I would have thought they would appear in the images/ directory because that is specified in the dest for responsive images.

Answer 1

Try configuring your Gruntfile.js as follows:

Gruntfile.js

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-responsive-images');

  grunt.initConfig({
    responsive_images: {
      dev: {
        options: {
          engine: 'im',
          upscale: true, // <-- 1. Set `upscale` to `true` if you want images
                         //        with a width of less than 1600px wide to
                         //        also be resized to 1600px wide.
          sizes: [{         
            width: 1600,
            suffix: '_large_2x',
            quality: 30
          }]
        },
        files: [{
          expand: true,
          src: ['**/*.{gif,jpg,png}'],
          cwd: 'images_src/',
          dest: 'images/'
        }]
      }
    },
    clean: {
      dev: {
        src: ['images']
      },
    }
  });

  grunt.registerTask('default', ['clean:dev', 'responsive_images:dev']);
};

Notes

1. The mkdir and copy tasks have been omitted. It's not necessary to create the destination directory and copy the image files as grunt-responsive-images can handle those tasks for you.

2. The options object for the responsive_images task now includes the upscale property with its value set to true . This will ensure that any images with a width of less than 1600px wide are also resized/upscaled to 1600px wide. Just delete it or set its value to false if you only want images with a width greater than 1600px to be resized.

3. When you now run grunt via your CLI using the gist above, something similar to the following will be logged to your console:

   Running "responsive_images:dev" (responsive_images) task

   Resized 8 files for 1600