Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

Compressor

The @uppy/compressor plugin optimizes images (JPEG, PNG, and any other format supported by the client’s browser) before upload, saving up to 60% in size (roughly 18 MB for 10 images). It uses Compressor.js library under the hood.

When should I use it?

When your users are likely to upload images, potentially on mobile devices, and saving data and faster uploads are important.

Install

npm install @uppy/compressor

Use

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Compressor from '@uppy/compressor';

new Uppy()
.use(Dashboard, {inline:true, target: '#dashboard')
.use(Compressor);

No action is needed from the user — Uppy will automatically optimize images, show an Informer message with saved bytes, and then begin the upload as usual.

API

Options

tip

You can also pass any of the Compressor.js options here as well.

id

A unique identifier for this plugin (string, default: 'Compressor').

quality

The quality of the output image passed to Compressor.js (number, default: 0.6).

It must be a number between 0 and 1. Be careful to use 1 as it may make the size of the output image become larger. In most cases, going with the default value is best.

note

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

limit

Number of images that will be compressed in parallel (number, default: 10).

You likely don’t need to change this, unless you are experiencing performance issues.

locale

export default {
strings: {
// Shown in the Status Bar
compressingImages: 'Compressing images...',
compressedX: 'Saved %{size} by compressing images',
},
};

Events

compressor:complete

The event is emitted when all files are compressed. You can use it for side effects or custom UI notifications.