Skip to content
Nuxt module to minify your images. Works with: png, jpeg, gif, and svg
Branch: master
Clone or download
Latest commit 691da3d May 5, 2019

README.md

nuxt-imagemin

wemake.services Build Status

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

Installation

npm install --save-dev 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.

You can’t perform that action at this time.