imagemin-webp
Advanced tools
Package description
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.
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');
})();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 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 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
WebP imagemin plugin
npm install imagemin-webp
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');
Returns a Promise<Buffer> with the optimized image.
Type: object
Type: string
Default: default
Preset setting, one of default, photo, picture, drawing, icon and text.
Type: number
Default: 75
Set quality factor between 0 and 100.
Type: number
Default: 100
Set transparency-compression quality between 0 and 100.
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.
Type: number
Set target size in bytes.
Type: number
Default: 50
Set the amplitude of spatial noise shaping between 0 and 100.
Type: number
Set deblocking filter strength between 0 (off) and 100.
Type: boolean
Default: false
Adjust filter strength automatically.
Type: number
Default: 0
Set filter sharpness between 0 (sharpest) and 7 (least sharp).
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).
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).
Type: object { x: number, y: number, width: number, height: number }
Crop the image.
Type: object { width: number, height: number }
Resize the image. Happens after crop.
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.
Type: Buffer
Buffer to optimize.
FAQs
WebP imagemin plugin
The npm package imagemin-webp receives a total of 154,792 weekly downloads. As such, imagemin-webp popularity was classified as popular.
We found that imagemin-webp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.