๐Ÿ“ฆ ngx-image-compression

August 6, 2025 ยท View on GitHub

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.


๐Ÿš€ Features

  • ๐Ÿ”ง 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

๐Ÿ“ฅ Installation

npm install ngx-image-lite

๐Ÿ› ๏ธ Usage

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'
});

๐Ÿ“˜ Parameters

OptionTypeDefaultDescription
maxWidthnumber800Max width of output image
maxHeightnumber800Max height of output image
qualitynumber0.7Compression quality (0 to 1)
formatstring'webp'Output format: 'webp', 'jpeg', 'png'
returnTypestring'file''file', 'base64', or 'blob'
fileNamestring'output'File name (if returnType is file)

๐Ÿ“ฆ Returns

  • If returnType = 'file' โ†’ returns a File object
  • If returnType = 'blob' โ†’ returns a Blob
  • If returnType = 'base64' โ†’ returns a string (base64)

๐Ÿ–ผ๏ธ Example with Angular

const result = await compressImage(file, {
  maxWidth: 1024,
  maxHeight: 1024,
  quality: 0.6,
  format: 'jpeg',
  returnType: 'base64'
});
this.previewUrl = result; // Display in 

๐Ÿ“Œ Use Cases

  • 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

๐Ÿ”– License

MIT


๐Ÿ” Keywords

angular, image compression, image conversion, webp, optimize image, resize, compress, image, s3 upload, ngx, frontend compression