Convert your images to WebP format. This is a fork of somerandomdude/grunt-webp, but with both backwards compatible and incompatible changes.
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
- 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) {
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');
};
- 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.