Project Overview
Web performance directly hinges on image payload budgets. Unoptimized JPEGs and oversized PNGs remain the primary cause of poor Google Core Web Vitals (LCP) across client websites. PixelShrink was engineered as an ergonomic, lightweight compression utility to streamline asset preparation.
It delivers browser-native canvas and worker-based compression for client uploads alongside Node/Sharp integration for automated build-step optimization. PixelShrink intelligently strips image EXIF bloat, computes optimal quantization palettes, and outputs modern WebP/AVIF formats.
Architectural Highlights
- Multi-threaded Web Worker architecture to prevent main-thread UI jank during batch image processing.
- Adaptive quantization algorithms that dynamically calculate target compression based on source complexity.
- Unified CLI and library interface usable across client-side React and server-side build pipelines.
Key Capabilities
- Batch conversion to modern WebP and AVIF formats
- Lossless and lossy compression slider with live side-by-side visual diff preview
- Automatic EXIF metadata removal for privacy and bytes savings
- Zero server dependencies for in-browser client compression mode
Quick Setup & Installation
git clone https://github.com/KamalSDhami/PixelShrink.git && npm installTechnologies Used
TypeScriptHTML5 Canvas APIWeb WorkersNode.js