Skip to content

SACHIN-S-2004/Image-Compression

Repository files navigation

πŸ–ΌοΈ Image Compression

🧠 K-Means Powered Smart Image Optimizer built with Flask

Python Flask OpenCV Scikit-Learn Bootstrap


✨ Overview

Image Compression is a modern Flask web app that reduces image size using K-Means color quantization.

Instead of storing millions of unique colors, the algorithm intelligently groups similar colors into clusters β€” dramatically shrinking file size while preserving visual quality.

πŸ“¦ From a simple Jupyter Notebook experiment, this project has been upgraded into a fully interactive web application with:

  • βœ” Upload
  • βœ” Compress
  • βœ” Compare
  • βœ” Download
  • βœ” View metrics

All in seconds.


🎯 Demo Flow

Upload Image
      ↓
K-Means Clustering (Color Quantization)
      ↓
Rebuild using K colors
      ↓
Show Preview + Compression Stats
      ↓
Download Optimized Image

πŸ“Έ Screenshots

πŸ’» Interface

alt text

Result: Before vs After

alt text


πŸ”₯ Features

πŸ–ΌοΈ Image Processing

  • K-Means color compression
  • Adjustable cluster count (8 – 64 colors)
  • RGB β†’ cluster β†’ reconstruct pipeline
  • Automatic JPEG optimization

πŸ“Š Smart Metrics

  • Unique original colors count
  • Original file size
  • Compressed file size
  • Compression percentage
  • Side-by-side comparison

πŸ’Ž UI/UX

  • Glassmorphism design
  • Gradient theme
  • Smooth animations
  • Loading state
  • Mobile responsive
  • Bootstrap powered

⚑ Backend

  • Flask routing
  • Static file handling
  • Secure uploads
  • Fast NumPy processing

🧠 How It Works (Simple)

Step 1 β€” Convert pixels

Image β†’ reshape to:

(height Γ— width, 3)

Each pixel becomes:

[R, G, B]

Step 2 β€” Apply K-Means

Group pixels into K clusters

Example:

16 million colors β†’ reduced palette ( 8, 16, 32, 64 )

Step 3 β€” Rebuild image

Replace each pixel with its cluster center.

Result:

Smaller memory + Similar visual quality

πŸ—οΈ Tech Stack

Layer Tech
Backend Flask
ML Algorithm Scikit-Learn KMeans
Image Processing OpenCV
Math NumPy
Frontend HTML + Bootstrap + CSS
Icons FontAwesome

πŸ“‚ Project Structure

image-compression/
β”‚
β”œβ”€β”€ app.py
β”œβ”€β”€ requirements.txt
β”‚
β”œβ”€β”€ static/
β”‚   β”œβ”€β”€ uploads/
β”‚   └── outputs/
β”‚
β”œβ”€β”€ templates/
β”‚   └── index.html
β”‚
└── README.md

βš™οΈ Installation

1️⃣ Clone repo

git clone https://github.com/SACHIN-S-2004/Image-Compression.git
cd Image-Compression

2️⃣ Install dependencies

pip install -r requirements.txt

3️⃣ Run app

python app.py

4️⃣ Open browser

http://127.0.0.1:5000

πŸ“ˆ Example Results

Metric Value
Original Colors 48,231
After K=16 16
Size Before 820 KB
Size After 210 KB
Saved 74%

πŸš€ Future Improvements

  • Drag & drop upload
  • Multiple images batch compression
  • Slider for real-time K selection
  • React frontend version
  • Auto cluster suggestion

πŸŽ“ Learning Outcomes

This project demonstrates:

  • βœ” Unsupervised Learning (K-Means)
  • βœ” Image processing fundamentals
  • βœ” Flask backend development
  • βœ” Practical ML deployment

⭐ If you like this project

Give it a star β€” it helps a lot!

About

A modern Flask web application built with Flask, OpenCV, and Scikit-Learn. It applies K-Means clustering to reduce color complexity, significantly shrinking file size while preserving visual quality, with live preview and compression statistics.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages