# image-blob-reduce

> High quality image resizing for blobs in browsers (`pica` wrapper with some sugar)

Latest version **5.0.1** (published 2026-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install image-blob-reduce
pnpm add image-blob-reduce
yarn add image-blob-reduce
bun add image-blob-reduce
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2026-07-06 |
| First published | 2020-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 659.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 316 |
| Maintainers | vitaly |
| Keywords | resize, scale, image, lanczos, canvas, blob |

## Links

- npm: https://www.npmjs.com/package/image-blob-reduce
- Repository: https://github.com/nodeca/image-blob-reduce
- Homepage: https://github.com/nodeca/image-blob-reduce#readme
- Issues: https://github.com/nodeca/image-blob-reduce/issues
- Funding: https://github.com/sponsors/puzrin
- npm.io page: https://npm.io/package/image-blob-reduce

## Dependencies (1)

- [pica](https://npm.io/package/pica.md) ^10.0.1

## 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

- 5.0.1 (latest) — 2026-07-06
- 5.0.0 — 2026-05-18
- 4.1.0 — 2021-12-10
- 4.0.0 — 2021-12-08
- 3.0.1 — 2021-06-21
- 3.0.0 — 2021-05-23
- 2.2.3 — 2021-04-19
- 2.2.2 — 2021-01-15
- 2.2.1 — 2020-12-30
- 2.2.0 — 2020-12-17
- 2.1.1 — 2020-11-17
- 2.1.0 — 2020-11-12
- 2.0.0 — 2020-10-15
- 1.0.7 — 2020-08-20
- 1.0.6 — 2020-07-31
- … 6 more at https://npm.io/package/image-blob-reduce/versions

## README

image-blob-reduce - downscale blobs with images inside
======================================================

[![CI](https://github.com/nodeca/image-blob-reduce/actions/workflows/ci.yml/badge.svg)](https://github.com/nodeca/image-blob-reduce/actions/workflows/ci.yml)
[![NPM version](https://img.shields.io/npm/v/image-blob-reduce.svg)](https://www.npmjs.org/package/image-blob-reduce)


> Wrapper for [pica](https://github.com/nodeca/pica) to work with blobs, with
> some sugar.

This is a `pica` wrapper for convenient work with images from file input fields.
While `pica` works with raw bitmaps, this package operates with "image files".
Additional features are:

- \[jpeg] Apply orientation to the downscaled result.
- \[jpeg] Keep metadata, but with patched orientation and the original color
  profile removed.
- Easy to monkey-patch for your needs.

**[Demo](https://nodeca.github.io/image-blob-reduce/demo/)**


Install
-------

```sh
npm install image-blob-reduce
```


Usage
-----

```mjs
import imageBlobReduce from 'image-blob-reduce'

const reduce = imageBlobReduce()

//...

reduce
  .toBlob(image_blob, { max: 1000 })
  .then(blob => { ... })
```

If you load the prebuilt UMD script in a browser, use
`window.imageBlobReduce`.

> [!NOTE]
> For a quick look at `dist/` folder contents, see
> <https://unpkg.com/image-blob-reduce@latest/>.


API
---

### imageBlobReduce([options])

Create a new reducer instance.

```mjs
import imageBlobReduce, { ImageBlobReduce } from 'image-blob-reduce'

const reduce = imageBlobReduce()

reduce instanceof ImageBlobReduce // true
```


### new ImageBlobReduce([options])

Create a new reducer. Options:

- `pica` - a `pica` instance, if you want different defaults or a shared
  web worker pool.


### .toBlob(in_blob, options) => Promise(out_blob)

Downscale an image so its width and height fit within `max`\*`max` pixels. For
example, `{ max: 1000 }` limits the longest side to 1000 px; it does not limit
the output blob size in bytes. If the blob contains a JPEG, orientation is
applied and metadata from the original image is reused (with minimal changes).

Options:

- __max__ - max allowed width/height, in pixels.
- __pica `.resize()` options__ - `quality`, `filter`, `unsharpAmount`,
  `unsharpRadius`, `unsharpThreshold`, `cancelToken`


### .toCanvas(in_blob, options) => Promise(out_canvas)

The same as `.toBlob()`, but with canvas output.


### .before(method_name, hook_fn)

Inject your custom handler before the specified method. See the `.setup()`
source code for an example.


### .after(method_name, hook_fn)

The same as `.before()`, but the handler is injected after the specified
method.


### .use(plugin_init, ...params) => this

Sugar to simplify the assignment of external plugins. Just calls
`plugin_init(this, ...params)`.


### .setup()

Configure the instance before first use. By default, installs the built-in JPEG
hooks. Override this method if you need to install custom plugins, add hooks or
replace pipeline methods before processing starts.


### Reexports

```mjs
import imageBlobReduce, { ImageBlobReduce, image_traverse, pica, Pica } from 'image-blob-reduce'
```

- `imageBlobReduce` - default factory.
- `ImageBlobReduce` - reducer constructor.
- `image_traverse` - JPEG traversal helpers.
- `pica` - `pica` factory.
- `Pica` - `pica` constructor.

Legacy static fields are available only in UMD build:

- `window.imageBlobReduce.ImageBlobReduce`
- `window.imageBlobReduce.image_traverse`
- `window.imageBlobReduce.pica`
- `window.imageBlobReduce.Pica`


## Customization

Since it's difficult to implement all possible options, this package is
specially designed for easy customization. See the source code first.

- You can inherit from the class & replace existing methods.
- You can add extra actions before/after existing methods.
- You can override existing methods of an instance.

For example, if you wish to force output to always be JPEG with a certain
quality:

```mjs
import imageBlobReduce from 'image-blob-reduce'

const reducer = imageBlobReduce()

reducer._create_blob = function (env) {
  return this.pica.toBlob(env.out_canvas, 'image/jpeg', 0.8)
    .then(function (blob) {
      env.out_blob = blob
      return env
    })
}
```

Or rewrite the scaling logic, introducing a `min` option instead:

```mjs
import imageBlobReduce from 'image-blob-reduce'

const reducer = imageBlobReduce()

reducer._calculate_size = function (env) {
  const scale_factor = env.opts.min / Math.min(env.image.width, env.image.height)

  if (scale_factor > 1) scale_factor = 1

  env.transform_width = Math.max(Math.round(env.image.width * scale_factor), 1)
  env.transform_height = Math.max(Math.round(env.image.height * scale_factor), 1)

  return env
}
```

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