Hi, I’m Youssef Bahida, a passionate software developer focused on building efficient, clean, and innovative solutions. On this blog, I share:
Articles about programming, tools, and best practices.
Obstacles & Solutions I encounter during development, including bugs, challenges, and how I fixed them.
This space is designed to help other developers learn from my experiences, discover practical tips, and explore projects that inspire innovation.
Let’s code, learn, and grow together!
Add 6 types of noise, then remove them with 8 denoising filters — all in real-time, directly in your browser. Compare Original · Noised · Filtered side by side.
Upload any image, choose a noise type, pick a filter, and instantly compare all three stages: Original → Noised → Filtered. The PSNR score tells you exactly how good the denoising is.
img-lab2.vercel.app — Upload & Apply toolbar
img-lab2.vercel.app — Original · Noised · Filtered panels
Noise panel
Filter panel
Noise Models
6 Types of Noise — Stackable
Real-world images are corrupted by different noise models depending on the sensor, medium, or transmission channel. Image Lab v2 lets you apply any of these and stack multiple noises together.
〜
Gaussian
Random normal distribution. Most common in sensors and cameras.
✦
Salt & Pepper
Random black and white pixels — typical of bit errors.
◆
Poisson
Photon-counting noise in low-light conditions and medical imaging.
✸
Speckle
Granular noise in radar, ultrasound and SAR imagery.
▦
Uniform
Equal probability random noise across all intensity levels.
≋
Periodic
Sinusoidal pattern from electrical interference. Visible as bands.
⚡ Stackable: You can combine multiple noise types on the same image — for example, add Gaussian + Salt & Pepper simultaneously, then test which filter handles the combo best.
Denoising Filters
8 Filters to Remove Any Noise
After corrupting your image, pick a denoising filter and see the result instantly. Each filter has its own strengths depending on the noise type.
Every time you apply a filter, Image Lab v2 computes the Peak Signal-to-Noise Ratio (PSNR) automatically — a standard metric used in image quality research. The higher the PSNR, the better the reconstruction.
> 30 dB GOOD ✓
20–30 dB ACCEPTABLE
< 20 dB POOR ✗
📊 No guessing. The app shows you a color-coded PSNR indicator (green / orange / red) right in the toolbar so you know instantly whether your filter choice was optimal.
How to Use It
3 Steps, Zero Setup
01
Upload Your Image
Drag and drop any PNG, JPG, or GIF (up to 10MB) — or click "Demo Image" to start immediately with a built-in test image.
02
Choose Noise & Filter
Select one or more noise models from the left panel. Then pick a denoising filter from the right panel. Stack noises freely.
03
Click "Apply All" & Compare
Hit the Apply All button and instantly see Original vs Noised vs Filtered — with the PSNR score showing your filter's performance.
Evolution
Image Lab v1 vs v2
Each version of Image Lab targets a different area of image processing:
Feature
v1 — Processing Lab
v2 — Noise & Filters
Color channels (R/G/B)
✓
—
Grayscale / Binarization
✓
—
Resize & Rotation
✓
—
Noise models (×6)
—
✓
Denoising filters (×8)
—
✓
PSNR quality metric
—
✓
3-panel comparison
—
✓
100% browser-side
✓
✓
Add Noise. Remove It. Measure It.
The most complete browser-based noise & filter playground. No install, no account, completely free.
Here's what Image Lab looks like when you open it — clean, dark, and ready to process any image you throw at it.
image-lab-nine.vercel.app
Header
Upload panel
👆 The interface is fully dark-themed and inspired by real dev tools. The upload panel supports JPG, PNG, WebP and GIF up to 10MB — just drag and drop your image to start.
About
What is Image Lab?
Image Lab is a web application built from scratch that brings classic image processing algorithms directly to your browser. Upload any image, apply transformations in real-time, and see the results instantly — no backend, no data sent anywhere, fully private.
Originally built as an academic project converting MATLAB algorithms into a real production app, it's now a clean, open tool anyone can use.
⚡ 100% client-side. Your images never leave your device. All processing happens in real-time using the HTML5 Canvas API — fast, private, and works offline once loaded.
Color Filters
Extract Any Color Channel
Every digital image is made of three color layers stacked together: Red, Green, and Blue. Image Lab lets you isolate each one separately, revealing hidden details and letting you understand how images are actually built.
RRed
GGreen
BBlue
☽Gray
Separating channels is fundamental in computer vision, medical imaging, and photography. With Image Lab, you can see it live — just upload an image and click.
Intensity Transforms
Grayscale, Binarization & Double
Beyond color extraction, Image Lab includes several classic intensity-based transforms used in real image processing pipelines:
🌫️
GrayscaleConverts the image to shades of gray using a luminance-weighted formula. Preserves perceived brightness.
⬛
Binarization (Otsu's Method)Automatically finds the optimal threshold to turn any image into pure black & white. Used in OCR, document scanning, and object detection.
✕2
Double (Brightness Amplify)Doubles pixel intensity values, revealing detail in dark regions and simulating exposure correction.
🎨
Color QuantizationReduces the number of distinct colors while preserving visual fidelity. Great for compression and artistic effects.
Spatial Transforms
Resize, Rotate & More
Image Lab also implements geometric transformations from scratch — not relying on browser CSS tricks, but computing pixel coordinates mathematically.
↔️
Bilinear Resize
Scales images up or down using bilinear interpolation — smooth results even at extreme ratios.
🔄
Affine Rotation
Rotates images by any angle using affine transformation matrices. Pixel-perfect, no blurring.
📤
Upload & Export
Load any JPEG, PNG or BMP image and download the processed result instantly.
⚡
Real-Time Preview
See every transformation applied live in the canvas — no waiting, no server round-trips.
Built With
The Tech Behind It
Entirely built with modern web standards — no heavy libraries for the processing logic. Every algorithm is hand-written JavaScript running on the Canvas API.
React 18ViteCanvas APIJavaScriptVercelHTML5CSS3
🧠 No AI used for processing. Every algorithm — Otsu threshold, bilinear interpolation, affine matrices — is implemented manually. This is classic computer vision the way it was meant to be understood.
Who Is It For?
From Students to Professionals
Image Lab was designed to be useful for a wide range of people:
🎓
CS & Engineering StudentsUnderstand image processing algorithms visually, not just theoretically.
📷
Photographers & DesignersQuickly isolate channels, convert to B&W, or experiment with color separation.
🔬
Researchers & DevelopersTest binarization thresholds and transformations without writing any code.
🙋
Curious PeopleEver wondered what your photo looks like in only red? Now you can find out in 2 seconds.
Ready to Process Your First Image?
It's free, instant, and runs entirely in your browser. No sign-up, no upload to any server.
