compressorjs

Compressor.js is a JavaScript library that shrinks image files in the browser before they get uploaded to a server. Instead of sending a large photo as-is, a web page using this library can reduce the file size first, which makes uploads faster and uses less server storage. The compression happens entirely on the user's device using a built-in browser feature called HTMLCanvasElement.toBlob, so no image data needs to be sent to an external service just for compression.

The compression is lossy, meaning some image quality is traded away to achieve a smaller file. The library works asynchronously: you hand it a file and provide callback functions that get called when compression finishes or when something goes wrong. How much compression you get depends on the browser being used, since different browsers implement the underlying canvas method slightly differently.

The main control you have over the output is a quality setting between 0 and 1. A value of 0.6 or 0.8 is suggested for most use cases. You can also set maximum and minimum dimensions for the output image, choose a target format (JPEG, PNG, or WebP), control whether to preserve or strip EXIF metadata (such as the camera orientation data embedded in phone photos), and tell the library to automatically rotate images based on that orientation data. If the compressed result ends up larger than the original, the library can be set to return the original file instead.

Installation is done through npm, and the package ships in several module formats so it works in both older bundler setups and modern ES module projects. Usage looks like creating a new Compressor instance, passing the file object from a file input field, and handling the result in a success callback. The example in the README shows sending the compressed file to a server via a form data POST request.

The project is maintained as a client-side utility with no server component. It is licensed under MIT.