Skip to content

A tiny wrapper around libSquoosh for use in gulp tasks.

License

Notifications You must be signed in to change notification settings

chenaski/gulp-squoosh

Repository files navigation

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.

github test workflow status npm version license npm downloads nodejs support coverage

Installation

npm i -D gulp-squoosh

Usage

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.

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: {},
};

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) /* ... */);

Useful links