chenaski / gulp-squoosh

A tiny wrapper around libSquoosh for use in gulp tasks.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to disable some output formats?

biosocket opened this issue · comments

Thanks for this awesome project :)

How do you disable some output formats? When I run the examples, each image is converted into every output format. How do you, for example, only output JPG? Or similarly, output each image only in its original format. For example, if a JPG and and PNG are processed, the output is a JPG and a PNG, corresponding to the input.

Thanks

Thanks for the question @biosocket, I'm glad that this project is useful for you :)

I tried to make this plugin as thin a layer as possible between gulp and libSquoosh, configuration object is completely the same and is passed as is.

Just like in libSquoosh, you can transform a single file into several formats at once:

gulpSquoosh({
  encodeOptions: {
    jxl: {},
    avif: {},
  },
});

The result of this configuration will be 2 files (for each input file) .avif and .jxl.

Most codecs in libSquoosh change the image format (webp, avif, jxl, wp2), but there are mozjpeg and oxipng that retain the original format.

If we have .png and .jpg source images and all you need to do is reduce their size, you can use dynamic configuration:

gulpSquoosh(({ filePath }) => {
  const imageExtension = path.extname(filePath);
  const isPng = imageExtension === ".png";

  const optionsForPng = { oxipng: {} };
  const optionsForJpg = { mozjpeg: {} };

  const options = isPng ? optionsForPng : optionsForJpg;

  return {
    encodeOptions: options,
  };
});

Here we pass function that will be called for each input image, and we check whether it png or jpg to select the appropriate codec (mozjpeg for jpg and oxipng for png).

Thus, we can have a different configuration for each image.

If you run plugin without any configuration gulpSquoosh(), the following configuration will be taken: { mozjpeg: {}, webp: {}, avif: {}, jxl: {}, oxipng: {} }.

Thank you so much for the detailed reply.
I will give this a try.

Your example worked perfectly.
Thanks again!