Vue cli 3 with imagemin webpack plugin

2
votes

Using vue cli 3. How to correctly optimize all images png/jpg/svg from src/assets/images using https://www.npmjs.com/package/imagemin-webpack-plugin in vue.config.js:

const ImageminPlugin = require('imagemin-webpack-plugin').default

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
    plugins: [
      new ImageminPlugin({
        pngquant: {
          quality: '90-95'
        }
      })
    ]
  }
}

But it seems like it's not processing my images, what config setting do i miss?

2
vue.jswebpackimagemin
That config works for me (it optimizes referenced images). Why do you think it's not processing your images? - tony19
because my images are the same size as before after imagemin optimizations. - Alexander Kim
Then it's likely the images cannot be optimized (perhaps they're already optimized). Try adding this png to your assets/, reference it from a component (e.g. via an <img>), and compare the output image size. - tony19
Ok, also pngquant works just for png's, right? How can i optimize jpg/svg as well? - Alexander Kim
That's right. The plugin's docs show the config needed for other image formats. - tony19

2 Answers

2
votes

The imagemin-webpack-plugin by default should optimize PNGs, GIFs, JPEGs, and SVGs pretty well. So even if you use no options (EX: new ImageminPlugin()) you will get all of those. If you want to customize how much it's compressing things, you can always take a look at the docs to customize it.

If your images aren't being optimized, it may be because the plugin has a "fallback" where if the optimized image is LARGER than the original image, it will just use the original one. Sometimes source images just won't compress any better, and falling back to the original seemed like a better default.

0
votes

By default optimization JPEGs did not occur in my case, everything worked after install imagemin-mozjpeg package

var ImageminPlugin = require('imagemin-webpack-plugin').default
var imageminMozjpeg = require('imagemin-mozjpeg')
...
configureWebpack: {
  plugins: [
    new ImageminPlugin({
      ...
      plugins: [
        imageminMozjpeg({
          quality: 85
        })
      ]
    })
  ]   
}