Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Convert your images to WebP format. This is a fork of somerandomdude/grunt-webp, but with both backwards compatible and incompatible changes.

Console output

Getting Started

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

npm install ayesh/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.

Additional settings introduced in this fork:

  • quite (boolean) Shuts up the webp program output. This results in a minimal output that you CI server would love.
  • deleteLarger (boolean) The most important change from this fork. Deletes the converted webp if it is larger than its source file.


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, // Or, omit this configuration to use use cwebp from path. You can also put the absolute path to cwebp executable here.
        preset: 'photo',
        verbose: true,
        quality: 90, // We recommend quality 90.
        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,
        quite: true,
        deleteLarger: true


  // load npm task

  // register task
  grunt.registerTask('default', 'webp');


Changes in this fork

  • The output is heavily modified. It now reports how much savings it made.
  • Deletes the convereted file if it is larger.
  • At the end of operation, a summary will be shown.


Grunt plugin for WebP image optimization (using cwebp)







No packages published