Project Description:

The Image Compression Tool (JS) is a lightweight, browser-based web application that allows users to upload, compress, and download images with reduced file size without significantly compromising image quality. Built primarily using JavaScript on the frontend, this tool enhances web performance by optimizing images before use in websites, apps, or sharing online.

Technologies Used:

• Frontend: HTML, CSS, Bootstrap, JavaScript (Core logic)

• Backend (optional for storage): PHP / Node.js / Java (if storing or serving images)

• Libraries (Frontend):

  • Canvas API for image processing

  • FileReader API for file handling

  • Optional: Compressor.js or similar

Core Features:

1. Image Upload:

   • Users can upload image files (JPEG, PNG, WebP, etc.) via drag-and-drop or file input.

2. Preview Display:

   • Original image is displayed along with metadata (file size, dimensions, format).

3. Compression Settings:

   • Users can adjust:

     • Quality (0–100)

     • Output format (e.g., WebP, JPEG)

     • Max width/height for resizing

4. Real-Time Compression:

   • JavaScript handles compression directly in the browser using the Canvas element.

   • Instantly previews the compressed version alongside the original.

5. Download Button:

   • User can download the compressed image to their device.