Learn How to Use Compressorjs to Optimize Image Sizes for Better Web Performance
Optimizing images is crucial for faster load times and better web performance. Compressorjs is a powerful JavaScript library that helps you compress images and achieve this goal. In this post, we’ll explore how to use Compressorjs along with some of its useful APIs, complete with code snippets and a practical app example.
Getting Started with Compressorjs
To start using Compressorjs, you need to include the library in your project. You can do this by adding the following script tag to your HTML:
<script src="https://cdn.jsdelivr.net/npm/compressorjs/dist/compressor.min.js"></script>
Alternatively, you can install it via npm for a Node.js project:
npm install compressorjs
Basic Usage
Compressing an image with Compressorjs is straightforward. Here’s a basic example:
const input = document.getElementById('file-input');
input.addEventListener('change', (event) => {
const file = event.target.files[0];
new Compressor(file, {
quality: 0.6, // Compress with a quality of 60%
success(result) {
// Handle the compressed image file
console.log(result);
},
error(err) {
console.error(err.message);
},
});
});
API Examples
Let’s dive into some useful API options provided by Compressorjs:
Quality
Set the quality of the output image. The value ranges from 0 to 1.
new Compressor(file, {
quality: 0.8, // 80% quality
success(result) {
console.log(result);
},
});
Max Width and Height
Restrict the maximum dimensions of the output image:
new Compressor(file, {
maxWidth: 800,
maxHeight: 600,
success(result) {
console.log(result);
},
});
MIME Type
Specify the MIME type of the output image:
new Compressor(file, {
mimeType: 'image/jpeg',
success(result) {
console.log(result);
},
});
Convert Size
Set the minimum size in bytes to enable image compression:
new Compressor(file, {
convertSize: 500000, // Compress images larger than 500KB
success(result) {
console.log(result);
},
});
Creating a Simple Image Compression App
Using the provided API options, we can create a simple image compression web app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Compression App</title>
<script src="https://cdn.jsdelivr.net/npm/compressorjs/dist/compressor.min.js"></script>
</head>
<body>
<h1>Upload and Compress Image</h1>
<input type="file" id="file-input">
<img id="preview" alt="Preview">
<script>
const input = document.getElementById('file-input');
const preview = document.getElementById('preview');
input.addEventListener('change', (event) => {
const file = event.target.files[0];
new Compressor(file, {
quality: 0.7,
maxWidth: 800,
success(result) {
const url = URL.createObjectURL(result);
preview.src = url;
},
error(err) {
console.error(err.message);
},
});
});
</script>
</body>
</html>
With this app, users can upload an image, and it will be compressed with the specified quality and dimensions, then previewed on the screen.
Start optimizing your images with Compressorjs and enhance your web performance today!
Hash: d763647d0684899fa0efc34f42f5531eff875c3c5ec34adc4a0956b3471f6b06
