webpack. Creating WebP with Jpeg and Png

As you know the image format WebP in most cases, it has less weight compared to its brothers: png And jpeg. Therefore, using it in your applications is a good practice.

But what about users whose devices do not support this format?

In this case, the tag helps us <picture> or value image-set properties background-image. We just write such magic constructions and the browser itself will choose the source that understands:

<!-- for HTML... -->
<picture>
  <source type="image/webp" srcset="https://habr.com/images/cat.webp">
  <img src="https://habr.com/ru/articles/733850/images/cat.jpg" width="100" height="100" alt="Cat">
</picture>

/* for CSS... */
.cat {
  background-image: url("https://habr.com/ru/articles/733850/images/cat.jpg");
  background-image: image-set(
        url("https://habr.com/images/cat.webp"),
        url("https://habr.com/ru/articles/733850/images/cat.jpg"),
    );
}

background-image: url("https://habr.com/ru/articles/733850/images/cat.jpg"); needed, because support is not so strong at the moment:

It turns out that for optimization and backward compatibility it is necessary not only to optimize the source images, but also to add its analogue in the webp format for each image. You can do it manually using the service Squoosh or analogues. But programmers are lazy people, and even if a project has a hundred or two pictures, their optimization and formatting will take a lot of time. This is where automation comes in.

I chose Webpack for this task, and what was my surprise when I rummaged through dozens of forums, studied the documentation for the most popular image optimization plugins and found that none of them had a setting that would allow not only to convert original jpeg images and png to webp, and optimize the sources and add to them copies in webp format.

But, fortunately, after a while I found a way out, which I hasten to share with you.

So, for our purposes, we will use 3 plugins: image-minimizer-webpack-plugin, imagemin-webp-webpack-plugin And copy-webpack-plugin.

module.exports = {

  plugins: [
    new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, 'source/images/'),
        to: path.resolve(__dirname, 'dist/images')
      }]
    }),
  ],
  
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|webp)$/i,
        type: 'asset/resource',
      },
    ]
  },
  optimization: {
    minimize = true
    minimizer = [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            plugins: [
              ['gifsicle', {'options...'}],
              ['jpegtran', {'options...'}],
              ['optipng', {'options...'}],
              ['svgo', {'options...'}],
            ],
          },
        },
      }),
      new ImageminWebpWebpackPlugin()
    ]
  }
}

ImageMinimizerPlugin optimizes sources, and CopyWebpackPlugin transfers the finished images to the dist folder.

Parallel ImageminWebpWebpackPlugin takes the sources, optimizes them, formats them in webp and puts them in dist.

I leave the optimization level and other settings up to you, everything is described in detail in the documentation. In my example, plugins for minimal optimization without quality loss. Good luck to everyone and thank you for your attention, I hope this article will be useful.