pic-smaller

Pic Smaller (图小小)

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · فارسی · Türkçe

[!IMPORTANT]

Pic Smaller Desktop — The Flagship Edition

Uncompromising native power, beyond the browser.

Elevate your workflow with the flagship Pic Smaller Desktop. A dedicated native application built for professionals who refuse to settle — it glides through massive files and entire folder libraries, supports 16+ image formats, and delivers superior processing performance. Complete the experience with an advanced suite of AI tools: background removal, watermark removal, and high-fidelity image upscaling.

Pic Smaller is a free, open-source batch image compressor that runs entirely in the browser. Images are processed locally with Web Workers, WebAssembly, Canvas, and browser codecs. Files are never uploaded to an application server.

Use the hosted app at picsmaller.com or www.picsmaller.com.

Features

• Compress JPEG, PNG, WebP, GIF, SVG, and AVIF images in batches.
• Decode HEIC and HEIF inputs locally and export them as JPEG, PNG, WebP, or AVIF.
• Convert formats, resize, crop, and control encoder-specific quality options.
• Add files by picker, folder picker, drag and drop, or clipboard paste.
• Compare original and compressed images with an interactive split view.
• Download individual results or save the complete batch as a ZIP archive.
• Keep images private: processing stays on the user's device.

Screenshot

The core workspace combines batch input, compression results, output settings, and download actions in one view.

Development

Requirements:

• Node.js 22 LTS or newer
• npm 10 or newer

git clone https://github.com/joye61/pic-smaller.git
cd pic-smaller
npm ci
npm run dev

Useful commands:

npm test            # Run the test suite
npm run lint        # Run ESLint
npm run build       # Build the standalone Node.js server
npm run build:pages # Export the static Cloudflare Pages site to out/

Deployment

Cloudflare Pages

The public site uses Cloudflare Pages with the GitHub repository integration. Cloudflare builds and deploys the site automatically with these settings:

Setting Value Production branch master Preview branch develop Build command npm run build:pages Output directory out Node.js version 22

Pushes to master update production. Pushes to develop create preview deployments. Other branches do not deploy automatically.

The Pages build removes Next.js's generated top-level 404.html, allowing Cloudflare Pages to apply its native single-page application fallback.

Docker

The Docker image is an alternative for private or self-hosted deployments. It uses Next.js standalone output, runs as the unprivileged node user, handles signals through tini, and includes a container health check.

docker build --pull -t pic-smaller:latest .

docker run -d \
  --name pic-smaller \
  --restart unless-stopped \
  --read-only \
  --tmpfs /tmp:rw,noexec,nosuid,size=64m \
  --cap-drop ALL \
  --security-opt no-new-privileges \
  -p 127.0.0.1:3000:3000 \
  pic-smaller:latest

Open http://127.0.0.1:3000. For public access, place the container behind a TLS-terminating reverse proxy such as Caddy, nginx, or Traefik. Remove the 127.0.0.1: bind prefix only when direct network exposure is intentional.

Secrets and configuration

The web application does not require API keys. Never commit credentials, Cloudflare tokens, .env files, .dev.vars, private keys, or local Wrangler state. The repository ignore rules exclude these files. If a future feature needs secrets, store them in the deployment platform's secret manager and provide only documented placeholder names in an .env.example file.

Project Structure

• src/app/: Next.js application entry points.
• src/components/: reusable interface components.
• src/engines/: browser codecs, workers, transforms, and compression queue.
• src/locales/: translations.
• src/views/: application views.
• public/: browser codec and WebAssembly assets prepared during builds.
• scripts/: codec preparation and deployment build helpers.
• tests/: Node.js test suite.

Contributing

1. Create a branch from develop.
2. Run npm test, npm run lint, and the relevant production build.
3. Update documentation and screenshots when behavior or the interface changes.
4. Open a focused pull request with a clear description and verification notes.

License

Pic Smaller is available under the MIT License.

Acknowledgements

• Squoosh Kit for AVIF, ImageQuant, and OxiPNG codecs.
• heic-to for browser-side HEIC and HEIF decoding.
• SVGO for SVG optimization.
• gifsicle-wasm-browser for GIF compression.