Image Compressor Tool
A lightweight, browser-based image compression tool built with React, TypeScript, and Vite. Compress images instantly with adjustable quality controls, side-by-side previews, and secure client-side processing.
No images are uploaded to any server — compression happens entirely in your browser.
✨ Features
🔹 Compress JPG / PNG / WebP images
🔹 Adjustable quality slider (lossy compression)
🔹 Preview before and after compression
🔹 Drag-and-drop support
🔹 Batch processing (optional)
🔹 Download compressed results
🔹 EXIF metadata handling
🔹 100% client-side, privacy-safe
🔹 Built with React + TypeScript + Vite
🛠 Tech Stack
React
TypeScript
Vite
Tailwind CSS (if enabled)
Browser image compression library
📦 Installation
Clone the repository:
git clone https://github.com/Mayawaaan/tool1.git cd tool1 npm install
🚀 Run the App (Development) npm run dev
Then open your browser at:
(Port may vary depending on Vite config)
🏗 Build for Production npm run build
Preview build:
npm run preview
📖 How It Works
Upload or drag-and-drop your images
Select compression quality
Preview output
Download compressed file(s)
Compression is handled using efficient in-browser image optimization algorithms to minimize file size while maintaining visual quality.
📂 Project Structure src/ ├── components/ ├── pages/ ├── utils/ ├── App.tsx └── main.tsx public/ index.html vite.config.ts
🗺 Roadmap
Support AVIF
Dark mode UI
Multiple image drag-drop compression
Compare mode (slider view)
PWA support
Cloud upload integrations
Contributions welcome.
🧪 Testing (optional section) npm run test
🤝 Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
🔎 SEO Tags (GitHub Topics) image-compression image-optimizer react vite typescript web-performance frontend-tool
🙌 Acknowledgements
Inspired by modern web performance optimization best practices.