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

Imagemin plugin for pngquant

Install

npm install imagemin-pngquant

Prerequisites

Linux machines must have the following packages prior to install: libpng-dev libimagequant-dev

sudo apt-get -y install libpng-dev libimagequant-dev

Usage

import imagemin from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';

await imagemin(['images/*.png'], {
	destination: 'build/images',
	plugins: [
		imageminPngquant()
	]
});

console.log('Images optimized');

API

imageminPngquant(options?)(input)

Returns Promise<Uint8Array>.

options

Type: object

speed

Type: number
Default: 4
Values: 1 (brute-force) to 11 (fastest)

Speed 10 has 5% lower quality, but is about 8 times faster than the default. Speed 11 disables dithering and lowers compression level.

strip

Type: boolean
Default: false

Remove optional metadata.

quality

Type: Array<min: number, max: number>
Values: Array<0...1, 0...1>
Example: [0.3, 0.5]

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 1 (perfect), similar to JPEG.

dithering

Type: number | boolean
Default: 1 (full)
Values: 0...1

Set the dithering level using a fractional number between 0 (none) and 1 (full).

Pass in false to disable dithering.

posterize

Type: number

Truncate number of least significant bits of color (per channel). Use this when image will be output on low-depth displays (e.g. 16-bit RGB). pngquant will make almost-opaque pixels fully opaque and will reduce amount of semi-transparent colors.

input

Type: Uint8Array

Image data to optimize.