imagemin-webp

What is imagemin-webp?

The imagemin-webp npm package is a plugin for the imagemin image optimization tool that allows you to convert images to the WebP format. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. This package helps in reducing the file size of images while maintaining quality, which can improve website performance.

What are imagemin-webp's main functionalities?

Convert images to WebP format

This feature allows you to convert images from formats like JPEG and PNG to WebP. The code sample demonstrates how to use imagemin-webp to convert all JPEG and PNG images in the 'images' directory to WebP format with a quality setting of 50, and save them in the 'output' directory.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
    await imagemin(['images/*.{jpg,png}'], {
        destination: 'output',
        plugins: [
            imageminWebp({ quality: 50 })
        ]
    });
    console.log('Images converted to WebP format');
})();

Lossless conversion

This feature allows you to convert images to WebP format using lossless compression. The code sample shows how to convert images in the 'images' directory to WebP format with lossless compression and save them in the 'output' directory.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
    await imagemin(['images/*.{jpg,png}'], {
        destination: 'output',
        plugins: [
            imageminWebp({ lossless: true })
        ]
    });
    console.log('Images converted to WebP format with lossless compression');
})();

Resize images during conversion

This feature allows you to resize images while converting them to WebP format. The code sample demonstrates how to resize images to 800x600 pixels during the conversion process and save them in the 'output' directory.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
    await imagemin(['images/*.{jpg,png}'], {
        destination: 'output',
        plugins: [
            imageminWebp({ resize: { width: 800, height: 600 } })
        ]
    });
    console.log('Images resized and converted to WebP format');
})();

Other packages similar to imagemin-webp

sharp

Sharp is a high-performance image processing library that supports conversion to WebP format among many other features like resizing, cropping, and rotating images. It is known for its speed and efficiency, making it a popular choice for image processing tasks. Compared to imagemin-webp, sharp offers a broader range of image manipulation capabilities.

webp-converter

WebP-converter is a simple package that provides utilities to convert images to WebP format. It supports both lossy and lossless compression. While it is not as feature-rich as imagemin-webp, it is straightforward to use for basic WebP conversion tasks.

gulp-webp

Gulp-webp is a Gulp plugin that allows you to convert images to WebP format as part of a Gulp build process. It integrates well with the Gulp task runner, making it a good choice for developers who use Gulp for their build automation. Compared to imagemin-webp, gulp-webp is more focused on integration with Gulp workflows.

README

imagemin-webp

WebP imagemin plugin

Install

npm install imagemin-webp

Usage

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';

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

console.log('Images optimized');

API

imageminWebp(options?)(buffer)

Returns a Promise<Buffer> with the optimized image.

options

Type: object

preset

Type: string
Default: default

Preset setting, one of default, photo, picture, drawing, icon and text.

quality

Type: number
Default: 75

Set quality factor between 0 and 100.

alphaQuality

Type: number
Default: 100

Set transparency-compression quality between 0 and 100.

method

Type: number
Default: 4

Specify the compression method to use, between 0 (fastest) and 6 (slowest). This parameter controls the trade off between encoding speed and the compressed file size and quality.

size

Type: number

Set target size in bytes.

sns

Type: number
Default: 50

Set the amplitude of spatial noise shaping between 0 and 100.

filter

Type: number

Set deblocking filter strength between 0 (off) and 100.

autoFilter

Type: boolean
Default: false

Adjust filter strength automatically.

sharpness

Type: number
Default: 0

Set filter sharpness between 0 (sharpest) and 7 (least sharp).

lossless

Type: boolean | number
Default: false

Encode images losslessly. If set to a number, activates lossless preset with given level between 0 (fastest, larger files) and 9 (slowest, smaller files).

nearLossless

Type: number
Default: 100

Encode losslessly with an additional lossy pre-processing step, with a quality factor between 0 (maximum pre-processing) and 100 (same as lossless).

crop

Type: object { x: number, y: number, width: number, height: number }

Crop the image.

resize

Type: object { width: number, height: number }

Resize the image. Happens after crop.

metadata

Type: string | string[]
Default: none
Values: all none exif icc xmp

A list of metadata to copy from the input to the output if present.

buffer

Type: Buffer

Buffer to optimize.