node package manager


Convert images to WebP format.


Convert your images to WebP format.

To install this plugin, open up the terminal, cd to your project's root directory and run the following command:

npm install grunt-webp --save-dev

This plugin depends on WebP's cwebp encoder. You'll need to install the WebP Package or use webp-bin

In your Gruntfile.js file add the following line:


This plugin requires Grunt ~0.4.0

  • binpath (string) Location of the cwebp executable, default 'cwebp'. Use forward slashes as directory separator.
  • quality (float) Quality factor (0:small..100:big).
  • alphaQuality (integer) Transparency-compression quality (0..100)
  • preset (string) Preset setting, one of: default, photo, picture, drawing, icon, text
  • compressionMethod (integer) Compression method (0=fast, 6=slowest).
  • segments (integer) Number of segments to use (1..4).
  • psnr (float) Target PSNR (in dB. typically: 42).
  • sns (integer) Spatial Noise Shaping (0:off, 100:max).
  • filterStrength (integer) filter strength (0=off..100).
  • filterSharpness (integer) Filter sharpness (0:most .. 7:least sharp).
  • simpleFilter (boolean) Use simple filter (default is false).
  • partitionLimit (integer) Limit quality to fit the 512k limit on the first partition (0=no degradation ... 100=full).
  • analysisPass (integer) Analysis pass number (1..10).
  • crop (array) Crop picture with the given rectangle. [x, y, width, height]
  • resizeCrop (array) Resize picture (after any cropping). [width, height]
  • multiThreading (boolean) Use multi-threading if available.
  • lowMemory (boolean) Reduce memory usage (slower encoding).
  • alphaMethod (string) Transparency-compression method (0..1).
  • alphaFilter (string) Predictive filtering for alpha plane. One of: none, fast (default) or best.
  • alphaCleanup (boolean) Clean RGB values in transparent area.
  • noAlpha (boolean) Discard any transparency information.
  • lossless (boolean) Encode image losslessly.
module.exports = function(grunt) {
    // WebP configuration 
    webp: {
      files: {
        //expand: true, 
        //cwd: 'path/to/source/images', 
        src: 'source/*.png',
        dest: 'output/path/'
      options: {
        binpath: require('webp-bin').path,
        preset: 'photo',
        verbose: true,
        quality: 80,
        alphaQuality: 80,
        compressionMethod: 6,
        segments: 4,
        psnr: 42,
        sns: 50,
        filterStrength: 40,
        filterSharpness: 3,
        simpleFilter: true,
        partitionLimit: 50,
        analysisPass: 6,
        multiThreading: true,
        lowMemory: false,
        alphaMethod: 0,
        alphaFilter: 'best',
        alphaCleanup: true,
        noAlpha: false,
        lossless: false
  // load npm task 
  // register task 
  grunt.registerTask('default', 'webp');