node package manager



Convert your images to WebP format.

Getting Started

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');