Quantipixor
A high-performance, privacy-first image processing suite that runs entirely in your browser. Compress JPG, PNG, WebP, AVIF and 14+ other formats in bulk, convert between formats, remove backgrounds with AI, extract text via OCR, and generate favicons — all without uploading a single file to a server.
2024 – Present
Next.js 16React 19TypeScript 5Tailwind CSS 4Zustand 5Radix UIFramer MotionJSZipSharpGoogle GeminiTesseract.jsHuggingFace TransformersUpstash RedisVercel BlobLucide React
Features
- 100% client-side batch image compression via the HTML Canvas API — images never leave the device
- Upload up to 1000 images per drop with a queue capacity of 2000 images
- SHA-256 file hashing for smart duplicate detection
- Configurable compression quality (20%–80%) with real-time per-image progress tracking
- ZIP download with organized batch sub-folders (batch-1/, batch-2/, …)
- Re-compress queued images with different settings without re-uploading
- AI-powered background removal via HuggingFace / Gradio
- Smart OCR document formatting using Google Gemini and OCR.Space with provider rotation
- Server-side favicon generation (.ico) using Sharp and to-ico
- Image format conversion with a shared interactive crop tool
- Redis-based rate limiting on all server API routes
- Glassmorphism design system with full dark/light mode support
- WCAG 2.2 AA accessibility with keyboard-first interactions
- Full SEO: Open Graph, Twitter Cards, and JSON-LD structured data
Challenges
- The HTML Canvas API can only reliably re-encode to JPEG, WebP, and PNG — all other input formats (GIF, BMP, SVG, AVIF, TIFF) must be rasterized to PNG, requiring careful format-handling logic
- HEIC/HEIF decoding support varies across browsers, requiring graceful fallback handling
- Designing a hybrid processing model that keeps sensitive media client-side while routing heavy AI tasks (background removal, OCR, favicon generation) through secure server API routes
- Implementing Redis-based rate limiting across multiple OCR providers (Gemini and OCR.Space) with automatic rotation to avoid quota exhaustion
- Maintaining a shared CropImage component that works consistently across three different tools (Favicon Generator, Background Remover, Image Converter)
What I Learned
- Deep understanding of the Canvas API for client-side image re-encoding and quality control
- Using crypto.subtle.digest for SHA-256 file hashing to build a robust deduplication system
- Integrating multiple AI providers (Google Gemini, HuggingFace Transformers, Gradio) and gracefully handling their differing APIs and rate limits
- Building a Zustand store that tracks a full image lifecycle (pending → processing → completed/error) across async batch operations
- Structuring Next.js App Router API routes for server-side binary processing (Sharp, to-ico) while keeping the rest of the app statically optimized
- Applying Tailwind CSS v4 with custom CSS variables to build a consistent glassmorphism design system
View Full Screen
View Full Screen
View Full Screen
View Full Screen
View Full Screen
