Compression Loop allows you to optimally compress images in the browser to the target size. This package utilizes an iterative approach called Quality Descent, to find the optimal balance between image quality and file size.
The Quality Descent Algorithm is utilized in the package which finds the optimal quality index to compress the image to the target size.
-
In-Browser Image Compression: Seamlessly compress images directly within the web browser, enabling efficient image optimization without the need for server-side processing.
-
Customizable Target Image Size: Specify precise target image sizes to align with your application's specific demands, ensuring optimal file size management.
-
Progress Callback Support: Monitor the compression progress with the built-in callback feature, allowing you to track and display compression status to users for a more interactive experience.
-
Lightweight and Dependency-Free: Developed with a focus on efficiency, the package is incredibly lightweight, with a file size of less than 1 kilobyte, and operates independently without any external dependencies.
-
Client-Side Processing: By shifting the image compression workload to the client side, this package reduces the strain on server resources, resulting in significant time and resource savings.
To install the Compression Loop package, you can use npm:
npm install compression-loop
Here's a basic example of how to use Compression Loop to compress images:
const compressionLoop = require('compression-loop');
..
<input
type='file'
accept='image/jpeg'
onChange={async (e) => {
const img = e.target.files[0]
const { status, compressedImg } = await CompressionLoop({ img })
if (status === 'success') {
console.log('Image compressed', compressedImg)
} else console.log(status)
}}
/>
Argument | Type | Usage |
---|---|---|
*img | Blob | Source image |
*maxSize | Number | Max allowed size in bytes |
onProgress | Function | Track progress |
timeout | Number | Max processing time in milliseconds |
maxIteration | Number | Max compression iterations |
quality | Number | Starting quality index (0-1], default: 1 |
descentIndex | Number | Quality decrement rate, default: 0.1 |
This package is open-source and available under the MIT License.
Contributions to the Compression Loop package are welcome! If you have any ideas, improvements, or bug fixes, please submit a pull request or open an issue.
Developed & maintained by neilveil
![Quality Descent Algorithm by neilveil](https://private-user-images.githubusercontent.com/29909602/271775364-413ea75a-136e-4721-b0b6-3b12161b408a.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MDUyMTYsIm5iZiI6MTcyNDUwNDkxNiwicGF0aCI6Ii8yOTkwOTYwMi8yNzE3NzUzNjQtNDEzZWE3NWEtMTM2ZS00NzIxLWIwYjYtM2IxMjE2MWI0MDhhLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDEzMDgzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU3YWYxYjg0YmQzZWIwYmNlMTI1NTRkOTQ4YjA1NGE4NzlkMjlhNWExZTU3ODA3ZmQxOTQ3OTNiMTU3MDQyZTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Z4j1PuVBpVOHmyEu_IM4_vr92Wc-nfRRruK3TOPQIgU)