1

I'm trying to figure out how to compress my images the best way using webpack. I'm looking for a way to compress .jpg (lossy), .png, and also create .webp files for each jpg/png file.

I tried https://github.com/itgalaxy/imagemin-webpack which seems to be working for outputting .jpg and .png files, but I cannot get to work to output .webp even if it say it should support other imagemin-packages.

My current config for this plugin is:

const imageMinPlugin = new ImageminPlugin({
    imageminOptions: {
        plugins: [
            ['webp', { quality: 50 }],
            ['mozjpeg', { quality: 10 }],
            ['pngquant', { quality: [0.9, 0.95]}],
        ]
    }
});

But it seems to completely ignore the "webp" part, no errors or anything. Is there a better way to compress images using webpack that fullfills my requirements? Or do I need to do this in a different way?

nickelman
  • 702
  • 6
  • 24

1 Answers1

1

There's already an answer here though the question wasn't precisely the same.

I guess what you miss is imageminWebp function. You may check it out in linked repo (webpack.common.js lines 22-26).

Igor Bykov
  • 2,532
  • 3
  • 11
  • 19
  • Okay - but that is then using a different setup than as a plugin. – nickelman Aug 28 '19 at 22:03
  • @nickelman It is indeed. Yet, imagemin itself doesn't convert your files into anything. It _optimizes_ already existing images. So if you already have webp images, your setup should work. In case you want to generate them, then, well, you need something apart from imagemin. I guess you might use imagemin-webp & imagemin as plugin in the same time. I use another optimization plugin just because I preferred it. – Igor Bykov Aug 29 '19 at 05:54