A lightweight image compression and conversion library for Angular. Ideal for optimizing large images (like 10MB+) before uploading to S3 or a server. Supports format conversion (e.g., JPG → WebP), resizing, quality tuning, and base64 or Blob output.
- 🔧 Compress images using canvas
- 📐 Resize to desired dimensions
- 🎯 Convert to different formats (
webp
,jpeg
,png
) - 🧠 Works with File, Blob, or base64 outputs
- 📦 Lightweight and framework-friendly
- 🟢 Built for Angular 16+ standalone architecture
npm install ngx-image-lite
import { compressImage } from 'ngx-image-lite';
const result = await compressImage(file, {
maxWidth: 800,
maxHeight: 800,
quality: 0.7,
format: 'webp', // optional: 'jpeg', 'png', or 'webp'
returnType: 'file', // 'file' | 'base64' | 'blob'
fileName: 'output' // only for returnType: 'file'
});
Option | Type | Default | Description |
---|---|---|---|
maxWidth |
number |
800 |
Max width of output image |
maxHeight |
number |
800 |
Max height of output image |
quality |
number |
0.7 |
Compression quality (0 to 1) |
format |
string |
'webp' |
Output format: 'webp', 'jpeg', 'png' |
returnType |
string |
'file' |
'file', 'base64', or 'blob' |
fileName |
string |
'output' |
File name (if returnType is file) |
- If
returnType = 'file'
→ returns aFile
object - If
returnType = 'blob'
→ returns aBlob
- If
returnType = 'base64'
→ returns astring
(base64)
const result = await compressImage(file, {
maxWidth: 1024,
maxHeight: 1024,
quality: 0.6,
format: 'jpeg',
returnType: 'base64'
});
this.previewUrl = result; // Display in
- Upload large images to AWS S3 with smaller payload
- Resize user-uploaded profile or gallery images
- Convert formats (e.g., PNG → WebP) for optimized delivery
- Reduce load on backend image processing
angular, image compression, image conversion, webp, optimize image, resize, compress, image, s3 upload, ngx, frontend compression