What is the best config for image-webpack-loader?

Question

Layout

Hello. I am developing a webpack project. I wanted to optimize the images using the image-webpack-loader plugin, but when building the project, the size of the images does not change in any way.
Here is my config:

{
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                          name: `${PATHS.assets}img/[name].[ext]`,
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 40
                            },
                            optipng: {
                                optimizationLevel: 4
                            },
                            pngquant: {
                                quality: [0.50, 0.70],
                                speed: 8
                            }
                        }
                    }
                ]
            }

Maybe it's in the config? If so, please tell me the settings. I will be glad for any help.

Answer 1

Button

.btn {
  text-decoration: none;
  text-transform: uppercase;
  display:inline-block;
  position: relative;
  padding: 10px 15px;
  color: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  transition: all 0.5s;
}

.btn:hover {
  border: 1px solid #000;
}

.btn:hover:after,.btn:hover:before  {
  opacity: 0;
}

.btn:before, .btn:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
  height: 3px;
  width: 70%;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s;
}

.btn:after {
  top: auto;
  bottom: -1px;
}

And blocks are absolutes and margins