CODEWITHSUNDEEP
vue.jswebpackimagemin
Alexander Kim
Alexander Kim

Reputation: 18401

Vue cli 3 with imagemin webpack plugin

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?

Upvotes: 2

Views: 3746

Answers (2)

heyheyhey
heyheyhey

Reputation: 1

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
        })
      ]
    })
  ]   
}

Upvotes: 0

Klathmon
Klathmon

Reputation: 273

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.

Upvotes: 2

Related Questions