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-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

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

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