Skip to main content

@roots/bud-imagemin

@roots/bud-imagemin optimizes image filesizes.

The extension uses GoogleChromeLabs/squoosh under the hood.

Installation

yarn add @roots/bud-imagemin --dev

Usage

Once installed, all compatible assets will be run through the image minimizer. No further config is necessary.

Convert to webp

You may convert an asset to webp format using the ?as=webp url param:

body {
background-image: url(./images/image.jpg?as=webp);
}
import Image from './images/image.jpg?as=webp'

Configuration

Sans configuration, the image minimizer extension will apply the libSquoosh 'auto' config.

Encoder

You can set options for an encoder with imagemin.encode:

export default async bud => {
bud.imagemin
/**
* Set encoder options:
* - 'jpg' will be interpolated to 'mozjpeg'
* - 'png' will be interpolated to 'oxipng'
*/
.encode('jpg', {quality: 50})
.encode('png', {quality: 90})
}

Available encoders:

encoderextension
mozjpeg.jpeg, .jpg
webp.webp
avif.avif
jxl.jxl
wp2.wp2
oxipng.oxipng

setEncodeOptions

You can fully override the encoder config using imagemin.setEncodeOptions.

Options are expressed as a Map:

const options = new Map([
['mozjpeg', {quality: 50}],
['oxipng', 'auto'],
['webp', {}],
])

export default async bud => {
bud.imagemin.setEncodeOptions(options)
}

Implementation

You can replace libSquoosh with another implementation using imagemin.setImplementation:

export default async bud => {
bud.imagemin.setImplementation(MyImplementation)
}

Generator implementation

You can replace the libSquoosh generator with another implementation using imagemin.setGeneratorImplementation:

export default async bud => {
bud.imagemin.setGeneratorImplementation(MyImplementation)
}