whatisgithub

What is compressorjs?

fengyuanchen/compressorjs — explained in plain English

Analysis updated 2026-06-26

5,739JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

Compressor.js is a JavaScript library that shrinks images in the browser before upload using the browser's built-in canvas API, no external service needed, no data leaves the user's device.

Mindmap

mindmap
  root((compressorjs))
    What it does
      Compress images
      Resize images
      Strip EXIF data
      Auto-rotate photos
    Output control
      Quality setting
      Max dimensions
      Format JPEG PNG WebP
    How it works
      Browser canvas API
      No external service
      Async callbacks
    Install
      npm package
      ES module support
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Compress user-uploaded photos in the browser before sending to a server to save bandwidth and storage costs.

USE CASE 2

Auto-rotate phone photos to the correct orientation before upload by reading embedded EXIF data.

USE CASE 3

Resize uploaded images to fit within maximum dimensions before they leave the user's device.

USE CASE 4

Convert uploaded images to WebP format to reduce file sizes in modern web apps.

What is it built with?

JavaScriptnpmHTML Canvas API

How does it compare?

fengyuanchen/compressorjsbowser-js/bowsercodingtrain/website-archive
Stars5,7395,7355,743
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity2/52/51/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
MIT, use freely for any purpose including commercial projects.

So what is it?

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.

Copy-paste prompts

Prompt 1
Add client-side image compression to my file upload form using Compressor.js, show me the code to compress a selected file to 0.7 quality before uploading via fetch.
Prompt 2
How do I use Compressor.js to resize an uploaded image to a max width of 1200px and convert it to WebP format?
Prompt 3
I want to strip EXIF metadata from photos before upload for privacy. Show me how to configure Compressor.js to do that.
Prompt 4
How does Compressor.js behave when the compressed output ends up larger than the original file?

Frequently asked questions

What is compressorjs?

Compressor.js is a JavaScript library that shrinks images in the browser before upload using the browser's built-in canvas API, no external service needed, no data leaves the user's device.

What language is compressorjs written in?

Mainly JavaScript. The stack also includes JavaScript, npm, HTML Canvas API.

What license does compressorjs use?

MIT, use freely for any purpose including commercial projects.

How hard is compressorjs to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is compressorjs for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.