Generate both PNGs and WEBPs

[busybox11]

Hi,
I'm trying to use this plugin to generate, as the issue's name indicates, both PNG and WEBP files, in order to maintain compatibility with older Safari versions that do not support WEBP. I'd like to minify the generated images too, if that's possible.
I'm still using the old plugin notation for easier maintenance but planning to move to the newer asset one soon. Though, it shouldn't change the issue, at least to my knowledge.
Here is my configuration:

new ImageMinimizerPlugin({
  generator: [
    {
      type: "asset",
      implementation: ImageMinimizerPlugin.imageminGenerate,
      options: {
        plugins: ["imagemin-pngquant", "imagemin-webp"],
      },
    },
  ],
}),

Using this configuration, it does generate WEBP imagges but still tries to use PNG in the source code, which are not being generated for some reason.
If I remove imagemin-webp from the plugins list, PNGs are generated.
Am I doing anything wrong?

Thanks in advance and thank you for this amazing plugin!
Been using it since about two years for Safari image optimization alone and it's been flawless so far.

[alexander-akait]

Please use:

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: "asset",
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: ImageMinimizerPlugin.loader,
        enforce: "pre",
        options: {
          generator: [
            {
              preset: "webp",
              implementation: ImageMinimizerPlugin.imageminGenerate,
              options: {
                plugins: ["imagemin-webp"],
              },
            },
            {
              preset: "png",
              implementation: ImageMinimizerPlugin.imageminGenerate,
              options: {
                plugins: ["imagemin-pngquant"],
              },
            },
          ],
        },
      },
    ],
  },
};

[busybox11]

Hello,
Thanks for your help!
I'm trying out what you've suggested but PNGs are still used in favor or WEBP for some reason. Can I specify which one I want to be used?

[andrew-k-21-12]

Do you state that you need WEBP images in your sources with ?as=webp - e.g. "./images/some-image.png?as=webp"? If not, then the minimizer (some fallback variant) is going to be used, according to the warning in the docs.

Also, can recommend to use the minimizer (for PNG) and generator (WEBP) configs from the docs link above. In my case it's something like:

new ImageMinimizerWebpackPlugin({
        generator: [
            {
                preset: "webp",
                implementation: ImageMinimizerWebpackPlugin.imageminGenerate,
                options: {
                    plugins: [
                        ["webp", { quality: 100 }]
                    ],
                },
            },
        ],
        minimizer: {
            implementation: ImageMinimizerWebpackPlugin.imageminMinify,
            options: {
                plugins: [
                    ["optipng", { optimizationLevel: 7 }], // lossless PNG optimization
                ],
            },
        },
    })

Regarding:

I'm trying to use this plugin to generate, as the issue's name indicates, both PNG and WEBP files, in order to maintain compatibility with older Safari versions that do not support WEBP.

- not sure if it's possible to be done entirely by webpack means - please take a look into the picture element (but maybe I'm mistaken here).

[busybox11]

Thanks for the snippet!
I made it work by migrating everything to assets rather than loaders, and for the Safari thing, we were already using separate loaders, so I just loaded the plugin with webp for global config and png for Safari only.