The Image Compressor asset provides a powerful and easy-to-use client-side solution for compressing images directly in the browser using JavaScript and the HTML Canvas. It enables applications to significantly reduce image file sizes while maintaining acceptable visual quality, without relying on server-side processing or third-party services.
Users can upload an image and control the compression level using a percentage-based scale, allowing fine-grained adjustment of image quality. Based on the selected percentage, the asset dynamically compresses the image and generates a new optimized output.
The asset clearly displays both the original image size and the compressed image size (in KB or MB), helping users understand how much space is saved after compression. A live preview of the compressed image is shown, enabling visual comparison before downloading or saving.
Key features include:
Client-side image compression using Canvas
Percentage-based quality control
Real-time display of original and compressed image sizes
Preview of the compressed image
Download option for the compressed file
Base64 output
No server calls, improving performance and privacy