Compressor

The Compressor plugin for Uppy optimizes images (JPEG, PNG), saving on average up to 60% in size (roughly 18 MB for 10 images). It uses Compressor.js.

import Uppy from '@uppy/core'
import Compressor from '@uppy/compressor'

const uppy = new Uppy()
uppy.use(Compressor)

Installation

This plugin is published as the @uppy/compressor package.

npm install @uppy/compressor

In the CDN package, the plugin class is available on the Uppy global object:

const { Compressor } = Uppy

Options

The @uppy/compressor plugin has the following configurable options:

uppy.use(Compressor, {
  quality: 0.6,
  limit: 10,
})

`id`

Type: string
Default: Compressor

A unique identifier for this plugin. It defaults to 'Compressor'.

`quality`

Type: number
Default: 0.8

This option is passed to Compressor.js.

The quality of the output image. It must be a number between 0 and 1. If this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. Other arguments are ignored. Be careful to use 1 as it may make the size of the output image become larger.

Note: This option only available for image/jpeg and image/webp images.

`limit`

Type: number
Default: 10

Number of images that will be compressed in parallel. You likely don’t need to change this, unless you are experiencing performance issues.

Event

compressor:complete event is emitted when all files are compressed.

Docs

UI Elements

Sources

Destinations

File Processing

Miscellaneous

React

Other Integrations