Compression Playground is a local-first, educational compression analysis tool. It allows users to upload an image and instantly see how different compression algorithms (JPEG, PNG, WebP, AVIF) affect visual quality, file size, and encoding speed side-by-side.
This tool is designed for developers, designers, and curious users who want to understand the trade-offs between different image compression formats without relying on server-side processing or opaque "black box" tools.
Understanding image compression often involves juggling multiple command-line tools or uploading private images to cloud services. It's hard to visualize exactly what "60% quality" looks like across different codecs or to understand why one format performs better than another for a specific image.
- Privacy First: All compression happens in your browser. No images are ever uploaded to a server.
- Side-by-Side Comparison: Compare JPEG, PNG, WebP, and AVIF instantly.
- Deep Analysis: View advanced metrics like PSNR and SSIM to objectively measure quality loss.
- Educational: Learn why a format behaves the way it does with built-in explanations.
To maintain focus and quality, this project explicitly excludes:
- Video, Audio (for now)
- User accounts and authentication
- Backend servers and cloud storage
- AI features
This project is a monorepo structured as follows:
apps/web: The React-based web interface.packages/codecs: Wrappers for WebAssembly-based compression codecs.packages/metrics: Utilities for calculating compression metrics (size, ratio, PSNR, SSIM).
See docs/architecture.md for a deep dive.
- Prerequisites: Node.js (v18+), pnpm.
- Install dependencies:
pnpm install
- Start development server:
pnpm dev