nuxt-imagemin

by wemake-services

wemake-services /nuxt-imagemin

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

141 Stars 8 Forks Last release: Not found MIT License 225 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

nuxt-imagemin

wemake.services Build Status

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:
  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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.