Image Resizer

A fast, private image resizer and optimizer that processes images directly in your browser without any server uploads.

🚀 Live Demo

Image Resizer App

📝 Description

Image Resizer is a web application that allows you to resize, compress, and optimize your images directly in your browser. Unlike traditional image processing services, this tool processes everything client-side, ensuring your images never leave your device, providing complete privacy and security.

Key Features:

• Client-Side Processing: Images never leave your device, all processing happens locally in your browser
• Multiple Format Support: Convert between JPEG, PNG, WebP, and AVIF formats
• Size Control: Specify target file size or dimensions for precise control
• Advanced Compression Options: Fine-tune quality, compression effort, and tolerance settings
• Format Auto-Selection: Intelligently chooses the best format based on your content and target size
• Real-Time Statistics: See compression results and file size reduction instantly
• Drag & Drop Interface: Easy-to-use interface for uploading images
• URL Import: Import images directly from URLs
• Responsive Design: Works seamlessly on desktop and mobile devices

Use Cases:

• Optimize images for websites to improve page load times
• Reduce file size for email attachments
• Prepare images for social media upload
• Convert between different image formats
• Resize images for specific dimensions needed for platforms or applications

⚙️ Installation & Setup

Prerequisites:

• Node.js 16.x or higher
• npm or yarn

Installation:

# Clone repository
git clone https://github.com/killcod3/image-resizer.git

# Navigate to the project directory
cd image-resizer

# Install dependencies
npm install

🏃‍♂️ Running the Application

# Development mode
npm run dev

# Production build
npm run build

# Start production server (if needed)
npm start

📦 Deployment

This application is built as a static site and can be deployed to any static hosting provider.

Deploying to Netlify:

1. Push your code to a GitHub repository
2. Sign up for a Netlify account
3. Create a new site from Git
4. Select your repository
5. Configure build settings:
   • Build command: npm run build
   • Publish directory: out
6. Deploy the site

🎯 Features

Image Upload

• Drag and drop interface
• File browser selection
• URL import capability
• Support for all major image formats

Processing Options

• Target file size control
• Quality adjustment
• Dimension resizing with aspect ratio preservation
• Format conversion
• Advanced compression settings

Results

• Side-by-side comparison
• Size reduction statistics
• One-click download
• Preview of processed image

💻 Tech Stack

• Frontend Framework: Next.js with React 18
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React
• State Management: React Hooks
• Build Tool: Next.js build system
• Deployment: Static export (compatible with Netlify, Vercel, etc.)

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines:

• Maintain privacy-first approach (no server uploads)
• Ensure browser compatibility
• Focus on performance and optimization
• Follow existing code style

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Contact

Jawad - GitHub Profile

Project Link: https://github.com/killcod3/image-resizer

---

Made with ❤️ by Jawad