Tested and works with gulp 5.0.0
and 4.0.2
.
Compression and conversion of images for gulp using sharp.
- Optimize your images.
- Convert your images to other formats (including, but not limited to
.webp
and.avif
).
- Using the sharp plugin.
- Has a minimum of dependencies.
- Supported formats:
.png .jpg/jpeg .webp .avif .tiff .heif .gif
- imagemin is unmaintained, see the issue.
- gulp-libsquoosh uses the outdated library @squoosh/lib, which does not have support for node > 16.0.0. In addition, the squoosh lib is no longer maintained.
- @donmahallem/gulp-sharp does not have normal documentation.
npm i --D gulp-sharp-optimize-images
OR
yarn add gulp-sharp-optimize-images -D
import sharpOptimizeImages from 'gulp-sharp-optimize-images';
import gulp from 'gulp';
export function yourImages() {
return gulp
.src('yourSrcImagePath')
.pipe(
sharpOptimizeImages({
webp: {
quality: 80,
lossless: false,
alsoProcessOriginal: true,
},
avif: {
quality: 100,
lossless: true,
effort: 4,
},
jpg_to_heif: {
quality: 90,
},
png_to_avif: {},
jpg_to_jpg: {
quality: 80,
mozjpeg: true,
},
})
)
.pipe(gulp.dest('yourDistImagePath'));
}
sharpOptimizeImages({
outputImageExtname: {
param: value,
},
imageExtname_to_imageExtname: {
param: value,
},
});
Type: object
An object that allows you to convert all
images into images of a specific type
.
Also optimizes and transmits the original.
// example, all images will be converted to avif.
avif: {
// If true, the originals will also be optimized and transferred.
alsoProcessOriginal: false,
param: value,
},
Type: any
(depends on the parameter)
Option for an output image.
To familiarize yourself with the available options, refer to the plugin documentation (for example, this section for .jpeg):
https://sharp.pixelplumbing.com/api-output#jpeg
Type: boolean
Default value: false
It also allows you to optimize and move the original file. It only works for the type outputImageExtname: {}
parameter.
Type: object
An object that allows you to convert images of a specific type
into images of a specific type
.
Does not transmit the original.
// example, all images in the format .jpg will be converted to .heif
jpg_to_heif: {
param: value,
},
// you can also optimize images without changing the extension
jpg_to_jpg: {
param: value,
},
Type: string
Default value: small
Can get the value: small | full | ''
Allows you to change the logging.
// usage example
sharpOptimizeImages({
logLevel: 'small',
...
});
// Log if the value of logLevel is equal to 'small' (default value):
yourImage.jpg => webp
// Log if the value of logLevel is equal to 'full':
The file the_absolute_path_to_your/image.jpg was processed to image.webp
// Log if the value of logLevel is equal to '' (or other value):
(the log is disabled)
png
jpg
|jpeg
webp
avif
tiff
heif
gif