chenaski
gulp-squoosh
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.
Installation
npm i -D gulp-squooshUsage
const gulp = require("gulp");
const gulpSquoosh = require("gulp-squoosh");
function processImages() {
return gulp.src("src/images/**").pipe(gulpSquoosh()).pipe(gulp.dest("dist/images"));
}Configuration
For available options, see libSqooush.
gulpSquoosh({
preprocessOptions: {...},
encodeOptions: {...},
});
gulpSquoosh(({ width, height, size }) => ({
preprocessOptions: {...},
encodeOptions: {...},
}));const DEFAULT_ENCODE_OPTIONS = {
mozjpeg: {},
webp: {},
avif: {},
jxl: {},
oxipng: {},
};Example
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>Troubleshooting
WASM memory error
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) /* ... */);