There is a specific kind of friction in front-end development that nobody talks about: the moment you drop a Figma export or a screenshot into your /public folder and immediately know you should compress it — but you don't, because it would break your flow.
You tell yourself you'll do it later. You rarely do. The uncompressed image ships. Lighthouse complains. You add it to the backlog. The cycle repeats.
TinyPixels' Watch Folder feature eliminates this entirely. You configure it once, and from that point on every image that lands in a watched folder is compressed automatically — while you work, in the background, without touching your build pipeline.
The problem with existing solutions
Every solution developers currently use for image optimization comes with tradeoffs:
| Solution | The catch |
|---|---|
| imagemin / sharp scripts | Per-project setup, breaks when deps update, needs Node.js in every project |
| webpack / vite image plugins | Framework-locked, increases build time, config overhead per project |
| next/image optimization | Runtime only — source files in the repo stay bloated |
| Cloudinary / imgix | Monthly cost, API keys, files leave your machine |
| Manual compression | Gets skipped under deadline pressure, breaks flow |
| Online tools (TinyPNG etc) | Upload required, file size limits, batch caps, privacy exposure |
The common thread: every solution is either project-specific, framework-dependent, or requires manual action. None of them just work in the background across all your projects without per-project configuration.
How Watch Folders work in TinyPixels
Open TinyPixels and navigate to the Watch tab. This is where you manage all your watched folders. Each entry in the list is a folder TinyPixels monitors continuously. When a new image file appears in a watched folder, TinyPixels compresses it automatically using that folder's settings and writes the output to the configured destination.
The original file is never modified. Your source image stays in the watched folder exactly as it arrived. The compressed output goes to a separate output folder you define.
Setting up a watched folder — step by step
Open the Watch tab
Launch TinyPixels and click Watch in the left sidebar. You'll see the Watch Folders screen, which lists all currently monitored folders.
Add a folder
Click "+ Add Folder to Watch" at the bottom of the screen. A system file picker opens — select the folder you want TinyPixels to monitor. This could be your project's assets folder, a Figma export destination, or any directory where images regularly appear.
Configure folder settings
After adding the folder, click the settings icon (the sliders icon) next to it. The Folder Settings panel opens with three options you can override per folder.
Folder Settings — what each option does
Output Destination
Where compressed images are saved. Leave it as Use Global Output Folder to send all output to the app-wide destination, or set a custom path for this specific folder. For example, watch assets/raw/ and output directly to public/images/.
Compression Level
Controls quality vs file size for this folder. Set to Use Global Settings to inherit the app-wide quality setting, or override it here. Useful if one folder holds high-fidelity source assets (higher quality) while another holds social media thumbnails (more aggressive compression).
Override Format Conversion
Toggle this on to convert images to a specific format as they are compressed. Choose from WebP, AVIF, JPEG, or PNG. When enabled, every image entering this folder — regardless of its original format — will be converted and compressed in one step. This is the key setting for a clean source/output workflow.
Example: drop a PNG Figma export into the watched folder, get a WebP in the output folder. No extra steps.
Save Settings
Click "Save Settings". The folder is now live — TinyPixels immediately begins watching it.
Enable Start on Login (optional but recommended)
Back on the Watch Folders screen, toggle on "Start on Login — Automatically start watching in background". With this enabled, TinyPixels launches silently at Mac login and resumes watching all your folders. You never have to remember to open the app — it's always running.
That's it. Total setup time: under two minutes. From this point, image compression happens automatically — you never think about it again.
A real developer project setup
Example: Next.js project with Figma assets
→ Designer drops hero.png (4.2 MB) into figma-exports/
→ TinyPixels compresses and converts automatically
→ hero.webp (310 KB) appears in public/images/
→ Original hero.png stays in figma-exports/ untouched
→ Developer references /images/hero.webp in code, done
Multiple folders, independent settings
You can add as many watched folders as you need. Each has its own independent configuration — output destination, compression level, and format override. TinyPixels monitors all of them simultaneously.
A practical multi-project setup:
Watch 1 — Web project assets
Watch: /client-a/assets/raw/ → Output: /client-a/public/ → Format: WebP
Watch 2 — Mobile app icons
Watch: /mobile-app/icons/src/ → Output: /mobile-app/icons/ → Format: PNG
Watch 3 — Documentation screenshots
Watch: /docs/screenshots/raw/ → Output: /docs/screenshots/ → Format: WebP
Framework-agnostic by design
Because TinyPixels operates at the filesystem level — not inside a build pipeline — it works identically regardless of what you're building: Next.js, Vite, Astro, SvelteKit, plain HTML, WordPress, React Native, or any other tool. There is no plugin to install, no package.json to touch, no build config to maintain.
Privacy for client work
Because compression runs locally on your machine, client assets never leave your disk. No file is sent to a cloud server. For agency developers and freelancers handling client product photos, mockups, or confidential work, this is a meaningful operational difference from any online compression tool.
History tab
Every file processed through a watched folder is logged in TinyPixels' History tab — filename, original size, compressed size, and compression ratio. Useful for auditing what has been processed and verifying output quality.