Gulp plugin to compress images using Squoosh.
The library this plugin covers is going to be deprecated, so you would better consider using another alternative.
npm i -D gulp-squoosh
const gulp = require("gulp");
const gulpSquoosh = require("gulp-squoosh");
function processImages() {
return gulp.src("src/images/**").pipe(gulpSquoosh()).pipe(gulp.dest("dist/images"));
}Plugin uses the same options object as the original library, without any additions.
So, to get actual information about the available options, see libSqooush.
And you can also check this issue.
gulpSquoosh({
preprocessOptions: {...},
encodeOptions: {...},
});
gulpSquoosh(({ width, height, size }) => ({
preprocessOptions: {...},
encodeOptions: {...},
}));const DEFAULT_ENCODE_OPTIONS = {
mozjpeg: {},
webp: {},
avif: {},
jxl: {},
oxipng: {},
};You can see full source code of the example here.
With growing adoption of ES modules, more and more libraries drop CommonJS support. Despite the fact this library doesn't support ESM, you can continue to use it in your ESM projects, here is an example.
const gulp = require("gulp");
const gulpSquoosh = require("gulp-squoosh");
const gulpCache = require("gulp-cache");
const SOURCE = "src/images/**";
const DESTINATION = "build/images";
function processImages() {
return gulp
.src(SOURCE)
.pipe(
gulpCache(
gulpSquoosh(({ width, height, size, filePath }) => ({
preprocessOptions: {
resize: {
width: width * 0.5,
},
},
encodeOptions: {
jxl: {},
avif: {},
webp: {},
// wp2: {}
...(path.extname(filePath) === ".png" ? { oxipng: {} } : { mozjpeg: {} }),
},
}))
)
)
.pipe(gulp.dest(DESTINATION));
}Then you can use converted images with <picture> tag:
<picture>
<source srcset="image.jxl" type="image/jxl" />
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="fill out me" />
</picture>You cannot run multiple gulp-squoosh tasks in parallel (via gulp.parallel) because you will get a wasm memory error.
But you can just replace it with gulp.serial, it will not affect the speed:
gulp.parallel(/* ... */ compressImages, /* ... */ compressOtherImages);
// become
gulp.parallel(/* ... */ gulp.series(compressImages, compressOtherImages) /* ... */);
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent