imagemin-pngquant

What is imagemin-pngquant?

The imagemin-pngquant package is a plugin for Imagemin that uses pngquant to compress PNG images. It is designed to reduce the file size of PNG images while maintaining quality, making it useful for web developers and designers who need to optimize images for faster loading times.

What are imagemin-pngquant's main functionalities?

Basic PNG Compression

This feature allows you to compress PNG images using the pngquant algorithm. The quality option specifies the range of quality to maintain during compression.

const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

(async () => {
    await imagemin(['images/*.png'], {
        destination: 'build/images',
        plugins: [
            imageminPngquant({
                quality: [0.6, 0.8]
            })
        ]
    });
    console.log('Images optimized');
})();

Custom Quality Settings

This feature allows you to set custom quality settings for the PNG compression. The quality range can be adjusted to balance between file size and image quality.

const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

(async () => {
    await imagemin(['images/*.png'], {
        destination: 'build/images',
        plugins: [
            imageminPngquant({
                quality: [0.3, 0.5]
            })
        ]
    });
    console.log('Images optimized with custom quality settings');
})();

Speed Optimization

This feature allows you to optimize the speed of the compression process. The speed option can be set from 1 (slowest, best quality) to 11 (fastest, worst quality).

const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

(async () => {
    await imagemin(['images/*.png'], {
        destination: 'build/images',
        plugins: [
            imageminPngquant({
                speed: 1
            })
        ]
    });
    console.log('Images optimized with speed setting');
})();

Other packages similar to imagemin-pngquant

imagemin-optipng

imagemin-optipng is another Imagemin plugin that uses OptiPNG to compress PNG images. It is similar to imagemin-pngquant but uses a different algorithm that can sometimes result in better compression ratios at the cost of longer processing times.

imagemin-zopfli

imagemin-zopfli is an Imagemin plugin that uses Google's Zopfli compression algorithm to compress PNG images. It is known for achieving higher compression ratios than pngquant, but it is significantly slower.

imagemin-pngcrush

imagemin-pngcrush is an Imagemin plugin that uses PNGCrush to optimize PNG images. It offers a good balance between compression ratio and speed, making it a versatile alternative to imagemin-pngquant.

README

imagemin-pngquant

pngquant imagemin plugin

Install

$ npm install --save imagemin-pngquant

Usage

const Imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

const Imagemin()
	.src('images/*.png')
	.dest('build/images')
	.use(imageminPngquant({quality: '65-80', speed: 4}))
	.run();

You can also use this plugin with gulp:

const gulp = require('gulp');
const imageminPngquant = require('imagemin-pngquant');

gulp.task('default', () => {
	return gulp.src('images/*.png')
		.pipe(imageminPngquant({quality: '65-80', speed: 4})())
		.pipe(gulp.dest('build/images'));
});

API

imageminPngquant(options)

options.floyd

Type: number, boolean
Default: 0.5

Controls level of dithering (0 = none, 1 = full).

options.nofs

Type: boolean
Default: false

Disable Floyd-Steinberg dithering.

options.posterize

Type: number

Reduce precision of the palette by number of bits. Use when the image will be displayed on low-depth screens (e.g. 16-bit displays or compressed textures).

options.quality

Type: string

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.

Min and max are numbers in range 0 (worst) to 100 (perfect), similar to JPEG.

options.speed

Type: number
Default: 3

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

Type: boolean
Default: false

Print verbose status messages.

License

MIT © imagemin