A modern, web-based image compression tool built with React, TypeScript, and Node.js. Compress your JPG/JPEG images with advanced quality and pixel reduction options while maintaining optimal visual quality.

Try it now: https://traeimage-compressorepwd.vercel.app

• Quality Compression: Reduce file size while maintaining visual quality
• Pixel Reduction: Resize images by percentage with optional aspect ratio preservation
• Drag & Drop Interface: Easy file upload with modern UI
• Real-time Processing: Live progress tracking with visual feedback
• Instant Download: Download compressed images immediately
• File Size Comparison: See before/after file sizes
• Mobile Responsive: Works seamlessly on all devices
• Dark Theme: Modern dark interface with geometric animations

1. Visit the live demo
2. Drag and drop a JPG/JPEG image onto the upload area, or click to browse files
3. Maximum file size: 50MB
4. Supported formats: JPG, JPEG

Quality Compression:

• Reduces file size while preserving image dimensions
• Adjust quality slider (1-100%)
• Best for: General file size reduction

Pixel Reduction:

• Resizes image by percentage
• Optional: Maintain aspect ratio
• Adjust quality after resizing
• Best for: Creating thumbnails or smaller versions

• Quality Compression: Set quality level (85% recommended)
• Pixel Reduction: Set resize percentage (50% default) and quality level
• Toggle aspect ratio preservation as needed

1. Click "Start Processing"
2. Watch real-time progress with animated feedback
3. View compression results and file size comparison
4. Download your optimized image instantly

• React 18 - Modern UI library
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first styling
• React Router - Client-side routing
• Zustand - State management
• Lucide React - Beautiful icons
• Sonner - Toast notifications

• Node.js - Runtime environment
• Express.js - Web framework
• Sharp - High-performance image processing
• Multer - File upload handling
• UUID - Unique identifier generation
• CORS - Cross-origin resource sharing

• Vercel - Serverless deployment platform
• Vercel KV - Redis-compatible storage

image-compressor/
├── src/                    # Frontend source code
│   ├── components/         # Reusable UI components
│   ├── pages/             # Route components
│   │   ├── Home.tsx       # Main upload interface
│   │   ├── Processing.tsx # Processing progress page
│   │   └── Results.tsx    # Results and download page
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions
│   └── styles/            # CSS and animations
├── api/                   # Backend API routes
│   ├── app.ts            # Express app configuration
│   ├── server.ts         # Server setup
│   └── routes/           # API endpoints
├── public/               # Static assets
├── uploads/              # Temporary file storage
├── output/               # Processed images
└── images/               # Sample images

• Node.js 18+
• npm or yarn

1. Clone the repository:

git clone <repository-url>
cd image-compressor

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

This will start both the frontend (Vite) and backend (Express) servers concurrently.

• npm run dev - Start both frontend and backend in development mode
• npm run client:dev - Start only the frontend development server
• npm run server:dev - Start only the backend development server
• npm run build - Build the project for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint for code quality

Create a .env file in the root directory for any environment variables needed for local development.

• POST /api/upload - Upload image file
• POST /api/process - Process uploaded image with specified options
• GET /api/download/:filename - Download processed image

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

This project is open source and available under the MIT License.