Compress

Privacy-First Image Compression

Live Demo

---

Overview • Features • Tech Stack • Getting Started • Configuration • Commands • License

---

Overview

Compress is a web application that compresses images directly in the browser. All processing happens client-side — no files are ever uploaded to a server. This guarantees complete privacy for the user.

Features

• 100% Client-Side — Files never leave the browser. Zero server uploads.
• Multiple Formats — JPG, JPEG, PNG, WebP, GIF and BMP (max 50 MB per file).
• Batch Processing — Compress up to 10 files at once.
• Before/After Comparison — Compare compressed and original images side by side.

Tech Stack

Layer	Choice
Framework	Next.js (App Router)
UI Components	shadcn/ui
Styling	Tailwind CSS v4
Language	TypeScript
Compression	Canvas (JPEG/WebP/BMP), upng-js (PNG), gifsicle-wasm (GIF)

Getting Started

Prerequisites

• Node.js 24+

Installation

git clone https://github.com/aefly/compress.git
cd compress
npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Configuration

Edit src/site.config.ts to customise the site. All values are read at build time.

Key	Description
name	App display name (header, OG image, manifest)
version	Version number shown in the header
title	Full page title for SEO
description	Full description for meta tags
shortDescription	Short description for OG/Twitter cards
url	Canonical site URL
authors	Author objects ({ name: "..." }) for metadata
keywords	SEO keywords array
themeColor	Primary accent hex colour (lightened 40% automatically in dark mode)
favicon	Custom favicon path (leave empty to use default favicon)
githubUrl	Link to the GitHub repository

Commands

Command	Description
npm run dev	Start development server
npm run build	Production build
npm run start	Serve production build
npm run lint	Run ESLint
npm run typecheck	Run TypeScript checks
npm run test	Run tests

License

This project is under the MIT License.