nuxt-imagemin

Nuxt module to minify your images. Works with: png, jpeg, gif, and svg.

Installation

npm install --save nuxt-imagemin
yarn add nuxt-imagemin

Add nuxt-imagemin to your nuxt.config.js:

{
  modules: ["nuxt-imagemin"];
}

Usage

1. Put your images inside assets folder, for example: logo.png
2. Then create an element to render it: <img src="~/assets/logo.png">
3. When you will bundle your app for production, nuxt will minify your image assets

Read more about how assets work.

Options

We use imagemin plugin for webpack internally. It has a lot of options. We pass any provided options into the imagemin itself:

{
  modules: [
    [
      "nuxt-imagemin",
      {
        optipng: { optimizationLevel: 5 },
        gifsicle: { optimizationLevel: 2 }
      }
    ]
  ];
}

Custom plugins

If you want to add a custom plugin for imagemin, you can follow this steps with imagemin-webp as example.

import imageminWebp from 'imagemin-webp'

module.exports = {
  modules: [
    ['nuxt-imagemin', {
      plugins: [
        imageminWebp({quality: 50})
      ]
    }]
  ]
}

License

MIT.