# img-loader

> Image minimizing loader for webpack 4

Latest version **4.0.0** (published 2021-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install img-loader
pnpm add img-loader
yarn add img-loader
bun add img-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2021-05-08 |
| First published | 2015-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 161 |
| Author | Andy VanWagoner |
| Maintainers | thetalecrafter |
| Keywords | image, imagemin, image-loader, optimize, minify, webpack, webpack-loader |

## Links

- npm: https://www.npmjs.com/package/img-loader
- Repository: https://github.com/vanwagonet/img-loader
- Issues: https://github.com/vanwagonet/img-loader/issues
- npm.io page: https://npm.io/package/img-loader

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2021-05-08
- 3.0.2 — 2020-09-18
- 3.0.1 — 2018-10-19
- 3.0.0 — 2018-05-02
- 2.0.1 — 2018-02-01
- 2.0.0 — 2017-03-14
- 1.3.1 — 2016-07-07
- 1.2.2 — 2015-12-01
- 1.2.1 — 2015-11-27
- 1.2.0 — 2015-07-14
- 1.1.0 — 2015-04-03
- 1.0.2 — 2015-03-04
- 1.0.1 — 2015-03-04
- 1.0.0 — 2015-03-04

## README

# img-loader

[![npm Version][npm-image]][npm]
[![MIT License][license-image]][LICENSE]

Image minimizing loader for webpack 4, meant to be used with [url-loader](https://github.com/webpack/url-loader), [file-loader](https://github.com/webpack/file-loader), or [raw-loader](https://github.com/webpack/raw-loader)

> Minify PNG, JPEG, GIF and SVG images with [imagemin](https://github.com/imagemin/imagemin) [plugins](https://www.npmjs.com/search?q=keywords:imageminplugin)

img-loader has a peer dependency on `imagemin`, so you will need to make sure to include that, along with any imagemin plugins you will use.


## Install

```sh
$ npm install img-loader --save-dev
```


## Usage

[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)

```javascript
module: {
  rules: [
    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      use: [
        'url-loader?limit=10000',
        'img-loader'
      ]
    }
  ]
}
```

By default the loader simply passes along the image unmodified.


### Options

Options are forwarded to `imagemin.buffer(image, options)`, so any plugins you would like to use for optimizing the images are passed as the `plugins` property.

For more details on each plugin's options, see their documentation on [Github](https://github.com/imagemin).

```js
{
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          'url-loader?limit=10000',
          {
            loader: 'img-loader',
            options: {
              plugins: [
                require('imagemin-gifsicle')({
                  interlaced: false
                }),
                require('imagemin-mozjpeg')({
                  progressive: true,
                  arithmetic: false
                }),
                require('imagemin-pngquant')({
                  floyd: 0.5,
                  speed: 2
                }),
                require('imagemin-svgo')({
                  plugins: [
                    { removeTitle: true },
                    { convertPathData: false }
                  ]
                })
              ]
            }
          }
        ]
      }
    ]
  }
}
```

`plugins` can also be a function, which will receive the [webpack loader context](https://webpack.js.org/api/loaders/#the-loader-context) and should return the plugins array.
```js
{
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          'url-loader?limit=10000',
          {
            loader: 'img-loader',
            options: {
              plugins (context) {
                if (process.env.NODE_ENV === 'production') return []
                return [
                  require('imagemin-svgo')({
                    plugins: [
                      { cleanupIDs: false },
                      {
                        prefixIds: {
                          prefix: path.basename(context.resourcePath, 'svg')
                        }
                      }
                    ]
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  }
}
```

If you only want to run imagemin in production builds, you can omit the `img-loader` or leave plugins empty in your production configuration file. If you don't keep a separate configuration for prod builds, something like the following also works:

```js
{
  loader: 'img-loader',
  options: {
    plugins: process.env.NODE_ENV === 'production' && [
      require('imagemin-svgo')({})
      // etc.
    ]
  }
}
```


## Migrating from 2.x

To get the default behavior from version `2.0.1`, you'll need to install these imagemin plugins:

* [imagemin-gifsicle](https://github.com/imagemin/imagemin-gifsicle)
* [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg)
* [imagemin-optipng](https://github.com/imagemin/imagemin-optipng)
* [imagemin-svgo](https://github.com/imagemin/imagemin-svgo)

Then use this loader setup in your webpack configuration file:

```js
{
  loader: 'img-loader',
  options: {
    plugins: [
      require('imagemin-gifsicle')({}),
      require('imagemin-mozjpeg')({}),
      require('imagemin-optipng')({}),
      require('imagemin-svgo')({})
    ]
  }
}
```

The options object you had under a plugin's name property, should instead be passed directly to the plugin after you require it.

If you used the optional `pngquant` settings, then you will additionally need to install [imagemin-pngquant](https://github.com/imagemin/imagemin-pngquant), and add it to your plugins array as any other imagemin plugin.


## License

This software is free to use under the MIT license. See the [LICENSE-MIT file][LICENSE] for license text and copyright information.

[npm]: https://www.npmjs.org/package/img-loader
[npm-image]: https://img.shields.io/npm/v/img-loader.svg
[license-image]: https://img.shields.io/npm/l/img-loader.svg
[LICENSE]: https://github.com/vanwagonet/img-loader/blob/master/LICENSE-MIT

---
_Source: https://npm.io/package/img-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._