Free and Open Source Image Compressor that works completely on your device - no internet required! Optimizes images locally, delivering unmatched efficiency without storing a single file. Experience lightning-fast compression, all in one place.
Try it out: https://hikwamehluli.github.io/image-compressor
Imagine you have a big, heavy photo that takes forever to send or upload. This app is like a magical shrinking machine that makes your photos smaller while keeping them looking great!
Simple Steps:
- 📤 Drag your photos to the app
- ⚙️ Choose how much to compress (slider)
- ✨ Watch the magic happen
- 📦 Download your smaller photos
image-compressor/ # Main project folder
├── public/ # Website files (logo, icons)
├── src/ # All the code that makes it work
│ ├── components/ # The visual parts you see
│ │ ├── ui/ # Basic building blocks (buttons, menus)
│ │ ├── action-buttons.tsx # Buttons for downloading/resetting
│ │ ├── compressed-images-grid.tsx # Shows your processed photos
│ │ ├── drop-zone.tsx # Where you drag your photos
│ │ ├── image-quality-slider.tsx # Controls compression amount
│ │ └── ... # And more visual parts
│ ├── hooks/ # Smart helpers that do the work
│ │ ├── useImageCompression.ts # Main brain for processing photos
│ │ └── useDragAndDrop.ts # Handles dragging photos around
│ ├── lib/ # Special tools for specific jobs
│ │ ├── image-processing.ts # The magic shrinking machine code
│ │ ├── file-validation.ts # Checks if files are really photos
│ │ ├── download.ts # Handles saving files to your computer
│ │ └── ... # And other utilities
│ ├── types/ # Defines what kinds of data we use
│ └── App.tsx # Main controller that connects everything
├── src-tauri/ # Makes it work as a desktop app too
├── package.json # Lists all the tools we use
└── README.md # This file!
Step 1: You Upload Photos
- You drag photos to the
DropZonecomponent file-validation.tschecks: "Are these really photos?" (only JPG, PNG, WEBP allowed)- If yes, they go to the processing queue
Step 2: The Magic Happens
useImageCompression.tstakes over as the main coordinator- For each photo, it calls the
processImagesfunction inimage-processing.ts - Each photo goes through 2 steps:
- Compression: Shrinks using HTML5 Canvas API (like squishing with a digital rolling pin)
- Format Conversion: Changes type if needed (JPG ↔ PNG ↔ WEBP)
Step 3: You See Results
- Processed photos appear in a nice grid
- You can see how much smaller they became
- Download individual photos or a ZIP file
Technology Stack:
- Frontend: React + TypeScript (building blocks for web)
- UI Components: shadcn/ui (pretty, accessible buttons/menus)
- Build Tool: Vite (makes development fast)
- Desktop App: Tauri (wraps web app for computers)
- Styling: Tailwind CSS (makes everything look good)
- AI Tools: OpenCode — see
AGENTS.mdfor agent workflow and conventions
Privacy & Security:
- ✅ All processing happens on YOUR computer
- ✅ No photos ever leave your device
- ✅ No internet required for compression once page is loaded
- ✅ Open source (anyone can check the code)
Performance Features:
- ⚡ Fast processing with HTML5 Canvas
- 📊 Progress tracking for each photo
- 🧹 Memory cleanup after each image
- 🔄 Sequential processing to prevent crashes
- Visit https://hikwamehluli.github.io/image-compressor
- Drag your photos to the box
- Adjust the slider to choose compression level
- Download your smaller photos!
- Node.js version
20+andnpminstalled - For desktop apps: Rust toolchain installed
# Get the code
git clone https://github.com/hikwamehluli/image-compressor.git
cd image-compressor
# Install tools
npm install
# Start the app
npm run devThen open your browser to http://localhost:3000 to use the app!
# Development
npm run dev # Start development server (recommended)
npm run start # Alternative (same as dev)
# Building
npm run build # Create production version
npm run preview # Test production build locally
# Desktop App
npm run tauri dev # Run as desktop app (development)
npm run tauri build # Build desktop app installer
# Code Quality
npm run lint # Check for code problems
npm run format # Fix code formatting- 🖼️ Multiple Formats: Works with JPG, PNG, WebP photos
- 🎚️ Quality Control: Slide to choose how much smaller you want photos
- 📦 Batch Magic: Compress many photos at once
- 💾 Easy Downloads: Get individual photos or ZIP folder
- 🖱️ Drag & Drop: Just drag photos anywhere on screen
- 📱 Works Everywhere: Computer, tablet, phone - all work!
- 🌙 Light/Dark Mode: Choose your favorite look
- 🔒 Super Private: Photos never leave your device
- ⚡ Super Fast: Processes happen instantly on your device
- 🖥️ Also a Desktop App: Install on your computer too
- Web deploy (
.github/workflows/main.yml): Auto-builds and deploys to GitHub Pages on every push tomaster. - Desktop release (
.github/workflows/desktop-release.yml): Manually triggered — builds Tauri installers for Windows, macOS (Intel + ARM), and Linux, then uploads them to a GitHub Release.
- 🍴 Fork the repository (click "Fork" button on GitHub)
- 🌿 Create a new branch:
git checkout -b add-amazing-feature - 📦 Install:
npm install - 🚀 Start:
npm run dev - ✏️ Make your changes
- ✅ Test everything works
- 💾 Commit:
git commit -m 'Add amazing feature' - 📤 Push:
git push origin add-amazing-feature - 🔄 Open a Pull Request on GitHub
- Use TypeScript (it helps catch mistakes early!)
- Keep components small and focused
- Add comments for complex code
- Follow existing code style
- Write clear, descriptive commit messages
- 🆕 Add support for more image formats
- 🚀 Make compression faster
- 🎨 Improve the user interface
- 📱 Make it work better on phones
- ♿ Make it more accessible
- 📝 Improve documentation
This project is free and open source under the MIT License - anyone can use, modify, and share it!
Created with ❤️ by HikwaMehluli
Found a problem? Have a cool idea? Feel free to open an issue on GitHub!