🖼️ Image Compressor

A modern, client-side image compression tool built with JavaScript. Compress your images directly in the browser without uploading them to any server.

✨ Features

• 🎯 Drag & Drop Interface: Simply drag images onto the upload area or click to browse
• 📁 Multiple Format Support: Input formats (JPEG, PNG, GIF, WebP, etc.) with output to JPEG, PNG, or WebP
• ⚙️ Quality Control: Adjustable compression quality from 10% to 100%
• 📏 Image Resizing: Optional maximum width and height constraints
• 🔄 Batch Processing: Compress multiple images at once
• 👀 Live Preview: Side-by-side comparison of original vs compressed images
• 📊 File Size Comparison: See exact file size reduction percentages
• ⬇️ Instant Download: Download compressed images immediately
• 🔒 No Server Required: All processing happens in your browser

🚀 Demo

You can try the live demo here or clone the repository and open index.html in your browser.

📖 How to Use

1. Upload Images

• Drag and drop images onto the upload area, or
• Click the upload area to browse and select files

2. Adjust Settings

• Quality: Use the slider to set compression quality (lower = smaller file size)
• Format: Choose output format (JPEG, PNG, or WebP)
• Dimensions: Optionally set maximum width/height to resize images

3. Compress

Click the "Compress Images" button

4. Download

Use the download button next to each compressed image

🛠️ Technical Details

• Client-Side Only: No data leaves your browser
• Canvas API: Uses HTML5 Canvas for image processing
• Modern JavaScript: ES6+ features with async/await
• Responsive Design: Works on desktop and mobile devices
• Dark Theme: Modern black interface design

📂 Supported Formats

Input Formats

• JPEG/JPG
• PNG
• GIF
• WebP
• BMP
• SVG

Output Formats

• JPEG (best for photos)
• PNG (best for graphics with transparency)
• WebP (modern format with excellent compression)

🌐 Browser Compatibility

Browser	Version
Chrome	50+
Firefox	47+
Safari	10+
Edge	79+

📁 File Structure

image-compressor/
├── 📄 index.html          # Main HTML structure
├── 🎨 style.css          # Styles with dark theme
├── ⚡ script.js          # Image compression logic
└── 📖 README.md          # This file

💡 Usage Tips

• For Photos: Use JPEG format with 70-80% quality for best balance
• For Graphics: Use PNG format to preserve sharp edges and transparency
• For Modern Browsers: Try WebP format for best compression
• Large Images: Set max dimensions to reduce file size significantly
• Batch Processing: Select multiple images to compress them all at once

🔐 Privacy & Security

This tool processes all images locally in your browser. No images are uploaded to any server, ensuring complete privacy and security of your files.

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/HadesIsOff/image-compressor.git

2. Navigate to the project directory

   cd image-compressor

3. Open in browser

   # Simply open index.html in your preferred browser
   start index.html  # Windows
   open index.html   # macOS
   xdg-open index.html  # Linux

🤝 Contributing

Contributions are welcome! Feel free to:

• 🐛 Report bugs
• 💡 Suggest new features
• 🔧 Submit pull requests

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ Show Your Support

If you found this project helpful, please consider giving it a star on GitHub!

---

Made with ❤️ by HadesIsOff