PixelPress - Browser Image Compressor for JPG, PNG & WebP (React + TypeScript)

PixelPress is a production-ready, fully client-side image compression app built with React 18, TypeScript and Vite. Every image is compressed inside the visitor's browser with Web Workers and OffscreenCanvas - nothing is uploaded, nothing is stored, and no API keys, accounts or backend services are required. Visitors drag in a batch of photos and watch file sizes drop by up to 90% while quality stays visually intact.

The workspace gives users full control in real time: a quality slider with four presets (Smaller / Balanced / High / Max), output format selection (Auto / WebP / JPG / PNG), and optional max-dimension resizing with locked aspect ratio. Every change instantly re-compresses the whole batch, and a per-file token system discards stale worker results so the numbers on screen always match the current settings.

Each result card shows original vs. compressed size, saved bytes, a percentage badge, source and output dimensions, and the format route (for example JPG to WEBP). A built-in before/after dialog with a draggable split slider lets buyers inspect quality at a glance, while single-image download and one-click ZIP export (fflate) handle delivery of the finished files.

The front end is a complete English-language product site: hero, compressor workspace, how-it-works steps, feature grid, FAQ accordion and call-to-action band, all fully responsive from 320px phones to wide desktops. It ships with SEO and Open Graph meta tags, keyboard shortcuts, clipboard paste (Ctrl/Cmd+V), drag-and-drop anywhere on the page, accessible focus states and zero external UI or CSS libraries, so rebranding is a matter of editing one stylesheet.

The project builds to plain static files and can be hosted on any static host; a dependency-free Node static server (server.mjs) is included for platforms that expect a Node process. Clean, typed, well-commented source - ideal as a standalone SaaS tool, as an embeddable utility for an existing product, or as a reference implementation for React + Web Worker image pipelines.