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:
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.
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,
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
grunt.loadNpmTasks('grunt-webp');
// register task
grunt.registerTask('default', 'webp');
};