Grunt plugin to compress png images with pngquant.
npm install grunt-pngmin> Grunt plugin to compress png images with pngquant.
This plugin requires Grunt >=1.0.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
``shell`
npm install grunt-pngmin --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js`
grunt.loadNpmTasks("grunt-pngmin");
Windows, Linux and Mac OSX is supported out of the box.
In your project's Gruntfile, add a section named pngmin to the data object passed into grunt.initConfig().
`js`
grunt.initConfig({
pngmin: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
#### options.concurrency
Type: Number4
Default value:
How many executables will be spawned in parallel.
#### options.ext
Type: String'-fs8.png'
Default value:
The file extension after the quantization.
#### options.quality
Type: String, Object or Arraynull
Default value:
Instructs pngquant to use the least amount of colors required to meet or exceed the max quality.
If conversion results in quality below the min quality the image won't be saved.
Specify quality like that:
- String: 'min-max'{min: min, max: max}
- Object: [min, max]
- Array:
min and max are numbers in range 0 (worst) to 100 (perfect), similar to JPEG.
For example as object: {min: 60, max: 80}.
#### options.force
Type: Booleanfalse
Default value:
Should existing files be overwritten by the optimized version? Be careful with this option if you need the original files!
#### options.speed
Type: Number3
Default value:
Speed/quality trade-off from 1 (brute-force) to 10 (fastest). Speed 10 has 5% lower quality, but is 8 times faster than the default.
#### options.iebug
Type: Booleanfalse
Default value:
Workaround for IE6, which only displays fully opaque pixels. pngquant will make almost-opaque pixels fully opaque and will avoid creating new transparent colors.
#### options.binary
Type: String'pngquant'
Default value: in your PATH or 'bin/pngquant'
This option is just for users where the pngquant-bin package could not be installed correctly. Normally you don't need this!
The pngquant executable which will be spawned. If the pngquant binary is not found in PATH the default fallback is 'bin/pngquant', but this option has always precedence.
#### options.retry
Type: Booleantrue
Default value:
If pngquant exits with status 99 (ie it was not able to compress with the specified quality option), allow pngmin to try again without quality option.
#### options.nofs
Type: Booleanfalse
Default value:
If nofs is set to true the Floyd-Steinberg dithering will be disabled.
#### options.failOnError
Type: Booleantrue
Default value:
Causes the grunt command to also fail in case an error is encountered. For details, just add --stack to your grunt command.
#### Default Options
In this example image.png will be optimized, copied to dest folder and renamed to image-fs8.png.
`js`
grunt.initConfig({
pngmin: {
compile: {
options: {},
files: [
{
src: "path/to/image.png",
dest: "dest/",
},
],
},
},
});
#### Custom Options
In this example image.png will be optimized and copied to dest folder.
`js`
grunt.initConfig({
pngmin: {
compile: {
options: {
ext: ".png",
},
files: [
{
src: "path/to/image.png",
dest: "dest/",
},
],
},
},
});
In this example image.png gets overwritten by the optimized version, so use force option carefully!
`js`
grunt.initConfig({
pngmin: {
compile: {
options: {
ext: ".png",
force: true,
},
files: [
{
src: "path/to/image.png",
dest: "path/to/",
},
],
},
},
});
#### Example which is preserving the subfolder structure
In this example all images in the folder path/to/images/ and its subfolders will be optimized and copied to dest while preserving the directory structure.
See http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically for more options.
`js`
grunt.initConfig({
pngmin: {
compile: {
options: {
ext: ".png",
},
files: [
{
expand: true, // required option
src: ["*/.png"],
cwd: "path/to/images/", // required option
dest: "dest/",
},
],
},
},
});
#### Complex example
This is a complex example with a lot of options set:
`js`
grunt.initConfig({
pngmin: {
compile: {
options: {
concurrency: 8, // specify how many exucutables get spawned in parallel
ext: ".png", // use .png as extension for the optimized files
quality: "65-80", // output quality should be between 65 and 80 like jpeg quality
speed: 10, // pngquant should be as fast as possible
iebug: true, // optimize image for use in Internet Explorer 6
nofs: true, // disable dithering
},
files: [
{
src: "path/to/images/*.png",
dest: "dest/",
},
{
src: "path/to/other/images/*.png",
dest: "another/dest/",
},
],
},
},
});
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
When writing unit tests, perform the following:
1. Ensure you've got Node 20+ setup and installed.
1. Run install: npm installnpm run test
1. Run tests:
- 2.0.3: Switch from chalk to yoctocolors for smaller install size (2024-06-30)
- 2.0.2: Build system switch from Rollup to tsup (2024-06-24)
- 2.0.0: Complete rewrite in TypeScript and update of all dependencies (to their latest CJS versions. ESM is not supported by Grunt) (2024-06-20)
BREAKING CHANGES:
- failOnError option is now true by defaultpngquant
- Requires Node.js 18+
- Requires Grunt.js 1.0+
- 1.4.0: Reporting errors when failing to run and added option failOnError. To begin failing on errors, please set failOnError to true. (2020-07-10 via #21)PATH
- 1.3.0: Option to disable Floyd-Steinberg dithering (2017-04-02)
- 1.2.0: Option to specify if a retry is made when pngquant exits with status 99
- 1.1.0: Updated all dependencies to the newest versions and removed colors and transbug options
- 1.0.3: Compatibility with grunt 1.x
- 1.0.2: Doesn't override images if savings were 0% (now for real, 1.0.1 was incorrect)
- 1.0.1: Doesn't override images if savings were 0%
- 1.0.0: Linux support with imagemin/pngquant-bin and travis CI integration
- 0.6.4: Reverted some code from 0.6.3 and fixed one unit test
- 0.6.3: Couple of fixes to prevent the reduce errors
- 0.6.2: If pngquant exits with status 99, pngmin will try again without quality option (fixes #9)
- 0.6.1: Added postinstall script to change permission on the OS X pngquant binary
- 0.6.0: pngquant binary is now included for windows and mac users (no additional pngquant installation need)
- 0.5.1: Fixed potential issue with quality option
- 0.5.0: Quality option of pngquant revealed to the plugin user
- 0.4.5: Shows overall saved bytes
- 0.4.4: Uses pngquant if it's in the , otherwise uses fallback, but options.binary has always precedenceforce` option is false and the file already exists at the destination pngquant doesn't get spawned
- 0.4.3: Fixed issue with total percent
- 0.4.2: Filesize of old and optimized image is shown
- 0.4.1: Gives a hint if no images were found
- 0.4.0: Destination doesn't have to be a directory anymore
- 0.3.4: If the
- 0.3.3: The total savings are displayed
- 0.3.2: The force option is no longer required if '.png' is set as ext option
- 0.3.1: If the optimization increases file size, the original file is copied to the destination
- 0.3.0: Corrected behaviour if files object is built dynamically (http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically)
- 0.2.1: Just one queue is created
- 0.2.0: The pngquant executable gets queued to avoid a problem with too many spawned executables
- 0.1.0: Initial release