https://github.com/wemake-services/nuxt-imagemin

Nuxt module to minify your images. Works with: png, jpeg, gif, and svg
https://github.com/wemake-services/nuxt-imagemin

image-optimisation image-optimization image-processing nuxt nuxt-module nuxtjs vuejs

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wemake-services/nuxt-imagemin
• Owner: wemake-services
• License: mit
• Archived: true
• Created: 2018-05-01T21:49:22.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-06-19T07:56:43.000Z (over 3 years ago)
• Last Synced: 2024-04-13T23:09:46.346Z (7 months ago)
• Topics: image-optimisation, image-optimization, image-processing, nuxt, nuxt-module, nuxtjs, vuejs
• Language: JavaScript
• Homepage:
• Size: 727 KB
• Stars: 178
• Watchers: 3
• Forks: 8
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# nuxt-imagemin

**Deprecated: use [official package](https://www.npmjs.com/package/@nuxtjs/imagemin) instead**

[![wemake.services](https://img.shields.io/badge/-wemake.services-green.svg?label=%20&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC%2FxhBQAAAAFzUkdCAK7OHOkAAAAbUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP%2F%2F%2F5TvxDIAAAAIdFJOUwAjRA8xXANAL%2Bv0SAAAADNJREFUGNNjYCAIOJjRBdBFWMkVQeGzcHAwksJnAPPZGOGAASzPzAEHEGVsLExQwE7YswCb7AFZSF3bbAAAAABJRU5ErkJggg%3D%3D)](https://wemake.services) [![Build Status](https://travis-ci.org/wemake-services/nuxt-imagemin.svg?branch=master)](https://travis-ci.org/wemake-services/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`:

```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](https://nuxtjs.org/guide/assets/).

## Options

We use `imagemin` plugin for `webpack` internally.

It has a lot of [options](https://www.npmjs.com/package/imagemin-webpack-plugin#new-imageminpluginoptions).

We pass any provided options into the `imagemin` itself:

```js

{

  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.

```js

import imageminWebp from 'imagemin-webp'

module.exports = {

  modules: [

    ['nuxt-imagemin', {

      plugins: [

        imageminWebp({quality: 50})

      ]

    }]

  ]

}

```

## License

MIT.