Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to disable some output formats? #56

Closed
biosocket opened this issue Oct 26, 2021 · 3 comments
Closed

How to disable some output formats? #56

biosocket opened this issue Oct 26, 2021 · 3 comments

Comments

@biosocket
Copy link

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

@chenaski
Copy link
Owner

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: {} }.

@biosocket
Copy link
Author

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

@biosocket
Copy link
Author

Your example worked perfectly.
Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants