A robust Node.js application for efficient image compression and format conversion, powered by the Tinify API. Designed with a dual-mode architecture to support both automated local directory monitoring and an intuitive web interface with batch processing capabilities.
- Dual Mode Architecture:
- Online Mode: Web-based drag-and-drop interface with batch processing support
- Local Mode: Automated filesystem watcher for background batch processing
- Batch Processing: Compress multiple images simultaneously with progress tracking
- Format Conversion: Support for converting to JPEG, PNG, WebP, and AVIF
- Smart Compression: Lossy compression algorithm that preserves visual quality
- ZIP Downloads: Download all compressed images as a single ZIP file
- Modern UI: Clean, responsive interface with glassmorphism design
- Runtime: Node.js
- Framework: Express.js
- Services: Tinify API
- Utilities: Chokidar (File Watching), Multer (File Handling), Archiver (ZIP creation)
- Frontend: Vanilla HTML/CSS/JS with Lucide Icons
- Node.js (v14 or higher)
- A Tinify API key (see below for instructions)
- Visit TinyPNG Developers: Go to https://tinypng.com/developers
- Sign Up: Enter your email and name
- Verify Email: Check your inbox for a verification email
- Get Your Key: Once verified, you'll receive your API key
- Free Tier: 500 compressions per month, completely free!
-
Star & Fork the repository:
- Visit github.com/jackosei/image-compressor
- Click ⭐ Star to show your support
- Click Fork to create your own copy
-
Clone your fork:
git clone https://github.com/YOUR-USERNAME/image-compressor.git cd image-compressor -
Install dependencies:
npm install
-
Configure Environment: Create a
.envfile in the root directory with your Tinify API key:TINIFY_KEY=your_api_key_from_tinypng # Optional: Set default mode (online/local) APP_MODE=online # Optional: Set local mode output format OUTPUT_FORMAT=original # Optional: Set port (default: 3000) PORT=3000
-
Start the application:
npm start
-
Access the web interface: Navigate to
http://localhost:3000
The web interface supports both single and batch image compression:
Single File:
- Drag & drop or click to select an image
- Choose output format (optional)
- Download compressed image
Batch Processing:
- Select multiple images (up to 20)
- Watch real-time compression progress for each file
- Download individually or all files as ZIP
Enable automated directory monitoring:
APP_MODE=local npm start- Place images in the
uploads/directory - Compressed files automatically appear in
converted/ - Set output format via
OUTPUT_FORMATin.env
This app can be easily deployed to run locally or on platforms like Render or Railway with minimal configuration.
Follow the Installation instructions above to run the app on your local machine with your own API key.
Render offers a generous free tier perfect for Node.js applications.
-
Push to GitHub
git add . git commit -m "Prepare for deployment" git push origin main
-
Create Render Account
- Go to https://render.com
- Sign up with GitHub
-
Create New Web Service
- Click "New +" → "Web Service"
- Connect your GitHub repository
- Render will auto-detect the
render.yamlconfiguration
-
Configure Environment Variables
- In the Render dashboard, go to "Environment"
- Add:
TINIFY_KEY=your_tinify_api_key APP_MODEis already set toonlinein render.yaml
-
Deploy
- Click "Create Web Service"
- Wait for deployment (2-3 minutes)
- Your app will be live at
https://your-app-name.onrender.com
Railway provides simple deployment with automatic HTTPS.
-
Push to GitHub (if not already done)
-
Create Railway Account
- Go to https://railway.app
- Sign up with GitHub
-
Deploy from GitHub
- Click "New Project" → "Deploy from GitHub repo"
- Select your repository
- Railway auto-detects Node.js and configures build
-
Add Environment Variables
- Go to "Variables" tab
- Add:
TINIFY_KEY=your_tinify_api_key - Add:
APP_MODE=online - Add:
NODE_ENV=production
-
Generate Domain
- Go to "Settings" → "Networking"
- Click "Generate Domain"
- Your app is live!
After deployment, test your app:
- ✅ Upload a single image
- ✅ Test batch processing (multiple images)
- ✅ Verify format conversion works
- ✅ Test ZIP download
If you're hosting publicly with your personal API key, consider adding usage limits (as implemented in the app UI) to preserve your 500/month free Tinify credits.
image-compressor/
├── src/
│ ├── server.js # Main application entry
│ ├── modes/
│ │ ├── online.js # Web interface routes
│ │ └── local.js # Directory watcher
│ └── services/
│ └── tinifyService.js # Image compression logic
├── public/
│ ├── index.html # Web UI
│ ├── script.js # Frontend logic
│ └── style.css # Styling
├── uploads/ # Input directory (local mode)
└── converted/ # Output directory (local mode)
| Variable | Description | Default |
|---|---|---|
TINIFY_KEY |
Your Tinify API key | Required |
APP_MODE |
Application mode: online or local |
online |
OUTPUT_FORMAT |
Local mode output format | original |
PORT |
Server port | 3000 |
- Free Tier: 500 compressions/month
- Batch Limit: 20 images per batch
- File Size: Maximum 10MB per image
- Supported Formats: JPEG, PNG, WebP
Q: Why is the hosted version limited to 5 compressions? A: To protect my personal API credits while offering a free demo.
Q: How do I get unlimited compressions? A: Clone this repo, get your own free Tinify API key, and run it locally!
Q: Can I process more than 20 images at once?
A: When running locally, you can modify the batch limit in src/modes/online.js.
Q: Is my data safe? A: Images are processed temporarily and automatically deleted. See our Privacy Policy for details.
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - feel free to use this project for your own purposes!
Built with ❤️ by Jack Osei
Get the code: GitHub Repository