https://github.com/chenaski/gulp-squoosh
A tiny wrapper around libSquoosh for use in gulp tasks.
https://github.com/chenaski/gulp-squoosh
avif gulp-plugin image-processing jxl mozjpeg nodejs optimization webp
Last synced: 6 months ago
JSON representation
A tiny wrapper around libSquoosh for use in gulp tasks.
- Host: GitHub
- URL: https://github.com/chenaski/gulp-squoosh
- Owner: chenaski
- License: mit
- Created: 2021-06-27T16:34:22.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-20T11:57:48.000Z (over 2 years ago)
- Last Synced: 2025-04-01T15:13:52.338Z (6 months ago)
- Topics: avif, gulp-plugin, image-processing, jxl, mozjpeg, nodejs, optimization, webp
- Language: JavaScript
- Homepage:
- Size: 4.2 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-squoosh
Gulp plugin to compress images using [Squoosh](https://github.com/GoogleChromeLabs/squoosh).
> The library this plugin covers is [going to be deprecated](https://github.com/GoogleChromeLabs/squoosh/pull/1266#issuecomment-1208149979),
> so you would better consider using another [alternative](https://github.com/lovell/sharp).
[](https://coveralls.io/github/chenaski/gulp-squoosh?branch=main)
## Installation
```
npm i -D gulp-squoosh
```
## Usage
```js
const gulp = require("gulp");
const gulpSquoosh = require("gulp-squoosh");
function processImages() {
return gulp.src("src/images/**").pipe(gulpSquoosh()).pipe(gulp.dest("dist/images"));
}
```
## Configuration
Plugin uses the same options object as the original library, without any additions.
So, to get actual information about the available options, see [libSqooush](https://github.com/GoogleChromeLabs/squoosh/blob/dev/libsquoosh/README.md).
And you can also check [this issue](https://github.com/chenaski/gulp-squoosh/issues/56).
```js
gulpSquoosh({
preprocessOptions: {...},
encodeOptions: {...},
});
gulpSquoosh(({ width, height, size }) => ({
preprocessOptions: {...},
encodeOptions: {...},
}));
```
```js
const DEFAULT_ENCODE_OPTIONS = {
mozjpeg: {},
webp: {},
avif: {},
jxl: {},
oxipng: {},
};
```
## Example
You can see full source code of the example [here](example/cjs/gulpfile.js).
With growing adoption of ES modules, more and more libraries [drop CommonJS support](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
Despite the fact this library doesn't support ESM, you can continue to use it in your ESM projects,
[here is an example](example/esm/gulpfile.js).
```js
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 [``](https://web.dev/learn/design/picture-element/) tag:
```html
```
## 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:
```js
gulp.parallel(/* ... */ compressImages, /* ... */ compressOtherImages);
// become
gulp.parallel(/* ... */ gulp.series(compressImages, compressOtherImages) /* ... */);
```
## Useful links
- https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/
- https://www.industrialempathy.com/posts/image-optimizations/
- https://www.industrialempathy.com/posts/avif-webp-quality-settings/
- https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg