# mini-image-loader

> Small image processing loader for Webpack.

Latest version **0.1.0** (published 2018-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install mini-image-loader
pnpm add mini-image-loader
yarn add mini-image-loader
bun add mini-image-loader
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-09-20 |
| First published | 2018-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 31.8 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vinícius Tabille Manjabosco |
| Maintainers | thevtm |

## Links

- npm: https://www.npmjs.com/package/mini-image-loader
- Repository: https://github.com/thevtm/mini-image-loader
- npm.io page: https://npm.io/package/mini-image-loader

## Dependencies (6)

- [ajv](https://npm.io/package/ajv.md) ^6.5.3
- [debug](https://npm.io/package/debug.md) ^3.1.0
- [sharp](https://npm.io/package/sharp.md) ^0.20.7
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [replace-ext](https://npm.io/package/replace-ext.md) ^1.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Recent versions

- 0.1.0 (latest) — 2018-09-20
- 0.0.7 — 2018-09-19
- 0.0.6 — 2018-09-02
- 0.0.5 — 2018-09-02
- 0.0.4 — 2018-09-01
- 0.0.3 — 2018-09-01
- 0.0.2 — 2018-09-01
- 0.0.1 — 2018-09-01

## README

# mini-image-loader ![npm](https://img.shields.io/npm/v/mini-image-loader.svg?style=flat-square) ![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg?longCache=true&style=flat-square)

Small image processing loader for Webpack.

## Usage

```javascript
const imagePath = require("./duck.png?resize=900x&format=jpeg&quality=80");
```

Webpack config:

```javascript
{
  module: {
    rules: [{
      test: /\.(png|jpe?g|tiff|webp)$/,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[name].[hash:8].[ext]",
            outputPath: "img/"
          }
        },
        { loader: "mini-image-loader" },
      ]
    }]
  }
}
```

## Debugging

`DEBUG=mini-image-loader` enables verbose mode.

## API

### format

Force output to a given format.

Adjust the lossless compression quality with the `quality` property.

**Param**: `enum`, one of `png`, `jpeg`, `tiff`, `webp`.

```javascript
require("./duck.jpg?format=png");
require("./frog.png?format=webp");
```

### quality

Set quality for lossless compression (`jpeg` and `webp`).

**Param**: `integer`, between `1` and `100`.

```javascript
require("./frog.png?format=jpeg&quality=90");
```

### lossless

Set lossless compression for `webp`.

```javascript
require("./frog.png?format=webp&lossless");
```

### nearLossless

Set near lossless compression for `webp`.

```javascript
require("./frog.png?format=webp&nearLossless");
```

### resize

Resize image to `width` x `height`.

**Param**: `string`, following the `WIDTHxHEIGHT` pattern.

Examples:

```javascript
require("./duck.png?resize=120x240");
require("./cats.jpg?resize=900x");
require("./frog.png?resize=x300");
```

### crop

Crop the resized image to the exact size specified by `resize`.

The experimental strategy-based approach resizes so one dimension is at its target length then repeatedly ranks edge regions, discarding the edge with the lowest score based on the selected strategy.

- **entropy**: focus on the region with the highest Shannon entropy.
- **attention**: focus on the region with the highest luminance frequency, colour saturation and presence of skin tones.

**Param**: `string`, `north`, `northeast`, `east`, `southeast`, `south`, `southwest`, `west`, `northwest`, `center`, `centre`, `entropy` or `attention`.

Examples:

```javascript
require("./duck.png?resize=120x240&crop");
require("./cats.jpg?resize=900x100&crop=entropy");
require("./frog.png?resize=300x300&crop=south");
```

### gravity

Possible attributes of the optional sharp.gravity are north, northeast, east, southeast, south, southwest, west, northwest, center and centre.

### tint

Tint the image using the provided chroma while preserving the image luminance. An alpha channel may be present and will be unchanged by the operation.

**Param**: `string`, following the `rgb hex` format `#RRGGBB`.

Examples:

```javascript
require("./duck.png?tint=#BABACA");
```

### greyscale

Convert to 8-bit greyscale; 256 shades of grey. This is a linear operation. If the input image is in a non-linear colour space such as sRGB, use gamma with greyscale for the best results. By default the output image will be web-friendly sRGB and contain three (identical) color channels.

Examples:

```javascript
require("./duck.png?greyscale");
```

### grayscale

Alternative spelling of greyscale.

### blur

Blur the image.
When used without parameters, performs a fast, mild blur of the output image.
When a sigma is provided, performs a slower, more accurate Gaussian blur.

**Param**: `number?` a value between 0.3 and 1000 representing the sigma of the Gaussian mask, where sigma = 1 + radius / 2.

Examples:

```javascript
require("./duck.png?blur");
require("./cats.jpg?blur=1.2");
require("./frog.png?blur=200");
```

### gamma

Apply a gamma correction by reducing the encoding (darken) pre-resize at a factor of 1/gamma then increasing the encoding (brighten) post-resize at a factor of gamma. This can improve the perceived brightness of a resized image in non-linear colour spaces. JPEG and WebP input images will not take advantage of the shrink-on-load performance optimisation when applying a gamma correction.

**Param**: `number?`, between `1.0` and `3.0` (optional, default 2.2)

Examples:

```javascript
require("./duck.png?gamma");
require("./cats.jpg?gamma=1.2");
require("./frog.png?gamma=2.4");
```

### flip

Flip the image about the vertical Y axis.
The use of flip implies the removal of the EXIF Orientation tag, if any.

Examples:

```javascript
require("./duck.png?flip");
```

### flop

Flop the image about the horizontal X axis.
The use of flop implies the removal of the EXIF Orientation tag, if any.

Examples:

```javascript
require("./duck.png?flop");
```

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