Ayesh / grunt-webp

Grunt plugin for WebP image optimization (using cwebp)

grunt-webp

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

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:

grunt.loadNpmTasks('grunt-webp');

This plugin requires Grunt ~0.4.0

Settings

• 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.

Example

module.exports = function(grunt) {

  
  grunt.initConfig({
	// 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
  grunt.loadNpmTasks('grunt-webp');

  // 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.