Overview
Stegnography is a web app that lets users encode secret text messages into images using LSB (Least Significant Bit) steganography. The encoded image looks visually identical to the original. Recipients can decode the message using the same tool.
The Inspiration
I've always been fascinated by security through obscurity as a concept — not as a sole defence, but as a layer. Steganography lets you hide a message not by encrypting it into unreadable noise, but by making it invisible inside something ordinary. I built this to deeply understand bit manipulation and the limits of visual perception.
Tech Stack
Next.js
Fast static deployment on Vercel with zero backend required — all processing happens client-side for privacy.
Canvas API
Direct pixel-level read/write access to image data made LSB manipulation straightforward and performant.
TypeScript
Bit manipulation bugs are subtle and hard to debug — strict typing helped me reason about byte boundaries correctly.
Web Crypto API
Added optional AES-GCM encryption of the message before embedding for a second layer of security.
Challenges & Solutions
JPEG compression was destroying the encoded bits after the image was downloaded, making decoding fail silently.
Forced PNG output format on export regardless of input type, since PNG uses lossless compression that preserves pixel values exactly.
Large messages in small images caused visible distortion in uniform colour regions.
Implemented capacity checking before encoding and added a visual density heatmap to show the user which regions were most affected.
What I Learned
- 01
Lossy compression and steganography are fundamentally incompatible — format choice is a hard constraint, not a preference.
- 02
The Canvas API is deceptively powerful for image processing tasks without any library dependencies.
- 03
Security layers compound — combining steganography with encryption raises the bar significantly for unintended discovery.