Resize This 🖼️

A free, privacy-focused image resizer and converter that runs entirely in your browser. No uploads, no servers, no tracking.

---

🌐 ✨ TRY THE LIVE DEMO ✨

👉 https://nicolasbagatello.github.io/resize-this/ 👈

---

🚀 Features

• Multiple Input Methods

  • Drag & drop images
  • File picker
  • Paste from clipboard (Ctrl+V / Cmd+V)
  • Load from URL

• Format Conversion

  • Input: JPEG, PNG, WebP, GIF, BMP
  • Output: JPEG, PNG, WebP
  • Smart format recommendations

• Resize & Optimize

  • Percentage-based scaling (1-150%)
  • Manual width/height with aspect ratio lock
  • Quality control for lossy formats
  • Real-time preview

• Security First

  • 7-layer file validation
  • Magic byte verification
  • SVG blocking (XSS prevention)
  • SSRF protection for URL inputs
  • CSP headers

• Privacy Focused

  • 100% client-side processing
  • No data uploaded to servers
  • No tracking or analytics

🛠️ Tech Stack

• React 18 + TypeScript
• Vite - Lightning-fast build tool
• Tailwind CSS + shadcn/ui - Beautiful, accessible components
• Canvas API - Native image processing
• file-type - Magic byte validation

📦 Bundle Size

• Total: ~111 KB gzipped
• React vendor: ~45 KB
• App code: ~62 KB
• Styles: ~4 KB

🔒 Security Features

The app implements multiple security layers:

1. File Extension Allowlist - Only approved image formats
2. Magic Byte Verification - Detects file spoofing
3. MIME Type Validation - Cross-checks file headers
4. Image Decode Test - Ensures valid, renderable images
5. SVG Blocking - Prevents XSS attacks
6. Size Limits - 10 MB maximum file size
7. Content Security Policy - Blocks inline scripts

Additional protections:

• URL validation (blocks javascript:, data:, file: schemes)
• SSRF prevention (blocks localhost and private IPs)
• EXIF data stripping on output
• Rate limiting (1 conversion per minute)

🚦 Getting Started

Prerequisites

• Node.js 20+
• npm or yarn

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Deployment

The app is configured for GitHub Pages deployment via GitHub Actions.

1. Push to the main branch
2. GitHub Actions automatically builds and deploys
3. Enable GitHub Pages in repository settings (Source: GitHub Actions)

📝 Usage

1. Upload an Image

   • Drag & drop, choose file, paste, or enter URL

2. Configure Settings

   • Select output format (JPEG, PNG, or WebP)
   • Adjust size using percentage slider or manual dimensions
   • Set quality (for JPEG/WebP)

3. Convert & Download

   • Click "Convert Image"
   • Compare before/after results
   • Download your optimized image

🎨 Features in Detail

Supported Formats

Input:

• JPEG (.jpg, .jpeg)
• PNG (.png)
• WebP (.webp)
• GIF (.gif) - ⚠️ Animations converted to static
• BMP (.bmp)

Output:

• JPEG - Best for photos (quality 70-95%)
• PNG - Lossless, supports transparency
• WebP - Modern format, smaller files (quality 65-90%)

Blocked:

• SVG - Security risk (XSS)
• TIFF - Not supported by Canvas API
• HEIC/HEIF - Limited browser support

Smart Warnings

• Transparency Loss - Alerts when converting PNG with alpha to JPEG
• GIF Animations - Warns that animations will be lost
• Large Images - Warns when dimensions exceed 5000px
• Upscaling - Notifies about potential quality loss

Rate Limiting

• 1 conversion per minute (primary limit)
• 10 conversions per session before progressive delays
• Progressive throttling for excessive use
• Visual countdown timer

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - feel free to use this project however you'd like!

🙏 Acknowledgments

• Built with Vite
• UI components from shadcn/ui
• Icons from Lucide

📊 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

WebP support available in 96%+ of modern browsers.

---

Made with ❤️ by the community

No servers. No tracking. Just pure, client-side image processing.