# fengyuanchen/compressorjs

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/fengyuanchen-compressorjs).**

5,749 stars · 451 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/fengyuanchen/compressorjs
- Homepage: https://fengyuanchen.github.io/compressorjs/
- awesome-repositories: https://awesome-repositories.com/repository/fengyuanchen-compressorjs.md

## Topics

`file-upload` `image-compression` `image-compressor` `javascript`

## Description

Compressorjs is a client-side image compression library that reduces file sizes in the browser before upload, using the HTML Canvas API to re-encode images into smaller File or Blob objects. It supports JPEG, PNG, and WebP formats, with configurable quality and dimension controls to balance file size and visual fidelity.

The library distinguishes itself through several integrated capabilities. It reads Exif orientation metadata from JPEG images and automatically rotates or flips the canvas to ensure correct display after compression. An AbortController integration allows cancellation of an in-progress compression task to free resources. Users can inject custom canvas operations through before-draw and after-draw hooks, enabling effects like watermarks or filters. The tool also converts image formats, such as PNG to JPEG, optionally triggered only when the original file exceeds a specified size threshold.

Additional capabilities include resizing and cropping images to exact dimensions or within bounds using contain or cover modes, with constraints on minimum and maximum width and height. The library preserves Exif metadata in the compressed output and provides fine-grained control over compression quality on a zero-to-one scale for JPEG and WebP output.

## Tags

### Graphics & Multimedia

- [Client-Side Compression](https://awesome-repositories.com/f/graphics-multimedia/digital-image-compression/client-side-compression.md) — Reduces image file size in the browser before upload to save bandwidth and speed up transfers.
- [Client-Side Compressors](https://awesome-repositories.com/f/graphics-multimedia/image-compressors/client-side-compressors.md) — A client-side image compression library that reduces file sizes in the browser using the Canvas API before upload.
- [Canvas-Based Image Processors](https://awesome-repositories.com/f/graphics-multimedia/canvas-based-image-processors.md) — Re-encodes images by drawing them onto an HTML Canvas element and exporting the result.
- [Browser-Based Compressors](https://awesome-repositories.com/f/graphics-multimedia/digital-image-compression/browser-based-compressors.md) — A browser-based JavaScript library that re-encodes images to smaller File or Blob objects with adjustable quality.
- [Manual Quality Adjustments](https://awesome-repositories.com/f/graphics-multimedia/adaptive-quality-adjustments/manual-quality-adjustments.md) — Sets the quality level for JPEG and WebP output to balance file size and visual fidelity.
- [EXIF Metadata Handling](https://awesome-repositories.com/f/graphics-multimedia/exif-metadata-handling.md) — Reads the Exif Orientation tag from JPEG metadata and applies a canvas transform to correct rotation.
- [Orientation-Aware Resizers](https://awesome-repositories.com/f/graphics-multimedia/exif-metadata-handling/orientation-aware-resizers.md) — Reads and applies EXIF orientation metadata during compression to ensure images display correctly after resizing.
- [Orientation Corrections](https://awesome-repositories.com/f/graphics-multimedia/exif-metadata-handling/orientation-corrections.md) — Reads the Exif Orientation tag from JPEG images and automatically rotates or flips the canvas before compression. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs@main/README.md))
- [Image Cropping Tools](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools.md) — Resizes images to a given width and height using contain or cover modes to fill the target area. ([source](https://fengyuanchen.github.io/compressorjs/))
- [Dimension-Constrained Resizing](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools/dimension-constrained-resizing.md) — Scales or crops images to exact dimensions or within bounds for consistent output sizes.
- [Exact Dimension Cropping](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools/exact-dimension-cropping.md) — Provides exact dimension cropping with aspect ratio override for consistent output sizes. ([source](https://fengyuanchen.github.io/compressorjs))
- [Bounded](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-processing/dimension-resizing/bounded.md) — Scales images within configurable min/max bounds while preserving aspect ratio. ([source](https://fengyuanchen.github.io/compressorjs))
- [Exact](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-processing/dimension-resizing/exact.md) — Resizes images to exact dimensions with contain or cover fit modes. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs@main/README.md))
- [Orientation Correction Utilities](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-processing/orientation-correction-utilities.md) — Reads Exif orientation data from JPEG images and automatically rotates or flips the output to match. ([source](https://fengyuanchen.github.io/compressorjs))
- [Image Format Conversion](https://awesome-repositories.com/f/graphics-multimedia/image-format-encoding/image-format-conversion.md) — Changes the MIME type of an image, such as PNG to JPEG, to reduce size or meet server requirements.
- [Quality Tuning](https://awesome-repositories.com/f/graphics-multimedia/image-output-configurations/quality-tuning.md) — Accepts a zero-to-one quality value that controls the compression level for JPEG and WebP output.

### Part of an Awesome List

- [Image Compression](https://awesome-repositories.com/f/awesome-lists/ai/image-compression.md) — Re-encodes images with configurable quality and dimensions to reduce file size before upload. ([source](https://fengyuanchen.github.io/compressorjs))
- [Image Quality Adjustments](https://awesome-repositories.com/f/awesome-lists/devtools/file-compression/compression-level-tuning/image-quality-adjustments.md) — Ships a configurable quality parameter on a zero-to-one scale for JPEG and WebP output. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs@main/README.md))
- [Dimension Bounds Enforcers](https://awesome-repositories.com/f/awesome-lists/devtools/image-optimization/resampling-optimizations/image-dimension-transformations/dimension-bounds-enforcers.md) — Limits the maximum or minimum width and height of the compressed image to fit within bounds. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs@main/README.md))

### Networking & Communication

- [Compression Abortions](https://awesome-repositories.com/f/networking-communication/request-abort-controllers/computation-abortions/compression-abortions.md) — Integrates an AbortController to cancel an in-progress compression task and free resources. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs@main/README.md))

### Operating Systems & Systems Programming

- [Image Metadata Preservations](https://awesome-repositories.com/f/operating-systems-systems-programming/assembly-metadata-editors/metadata-preservation/image-metadata-preservations.md) — Preserves the original image's Exif metadata in the compressed output instead of stripping it. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs@main/README.md))

### User Interface & Experience

- [Canvas Drawing Hooks](https://awesome-repositories.com/f/user-interface-experience/canvas-components/canvas-watermarkers/canvas-drawing-hooks.md) — Provides before-draw and after-draw hooks for injecting custom canvas operations like watermarks or filters. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/compressorjs@main/README.md))
- [Aspect Ratio Preserving Resizing](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/image-bounding-boxes/aspect-ratio-preserving-resizing.md) — Scales images within bounding boxes while preserving original aspect ratio. ([source](https://fengyuanchen.github.io/compressorjs/))