Image Resizer AI

A production-ready, privacy-first web application for resizing images and optimizing file sizes. Built with Next.js, TypeScript, and modern image processing libraries.

✨ Features

• Three Processing Modes:

  • Resize Image: Change pixel dimensions with unit support (px, %, cm, in)
  • File Resize: Target specific file sizes (KB/MB) with quality optimization
  • Both: Combine dimension and file size targeting

• Privacy-First Design:

  • Client-side processing using WebAssembly
  • No image uploads to persistent servers
  • Ephemeral server processing when needed

• Comprehensive Format Support:

  • Input: JPG, PNG, WebP, AVIF, GIF, TIFF
  • Output: Optimized formats with quality controls
  • Background color handling for transparency

• Advanced Features:

  • DPI/resolution control for print workflows
  • Aspect ratio locking
  • Batch processing
  • Live preview with progress tracking
  • Accessibility compliant (WCAG AA)

🚀 Technology Stack

• Frontend: Next.js 15 with TypeScript
• Styling: Tailwind CSS v4 + shadcn/ui components
• Image Processing:
  • Client-side: Squoosh WebAssembly libraries
  • Server fallback: Sharp (libvips) for large files
• Deployment: Vercel with Edge Functions
• Performance: WebAssembly for near-native speed

📦 Installation

# Clone the repository
git clone <repository-url>
cd image-resizer-ai

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the application.

🛠️ Development

# Type checking
npm run type-check

# Linting
npm run lint
npm run lint:fix

# Build for production
npm run build

# Generate sitemap
npm run build:sitemap

📁 Project Structure

src/
├── app/                 # Next.js 13+ app router pages
├── components/          # React components
│   ├── layout/         # Layout components
│   ├── upload/         # File upload components  
│   ├── processing/     # Image processing UI
│   ├── forms/          # Form controls
│   └── ui/             # shadcn/ui components
├── lib/                # Utility libraries
│   ├── image/          # Image processing logic
│   └── utils/          # General utilities
├── types/              # TypeScript definitions
└── hooks/              # Custom React hooks

🔧 Configuration

Key configuration files:

• next.config.js: Next.js configuration with WebAssembly support
• tailwind.config.ts: Tailwind CSS configuration
• tsconfig.json: TypeScript configuration
• components.json: shadcn/ui configuration

🌐 Deployment

The application is optimized for deployment on Vercel:

1. Connect your repository to Vercel
2. Configure environment variables if needed
3. Deploy with automatic builds on commits

For other platforms, use npm run build to generate production files.

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

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

📞 Support

• Documentation: /help
• Security: /security
• Issues: GitHub Issues