Image Optimizer

A Fullstack Web app built with Next.js for compressing and optimizing images.
Live Demo

Tech Stack

Framework: Next.js 16.2 (App Router)
Frontend: React, TailwindCSS, Shadcn/ui
Image Processing: Sharp library

Features

Drag-and-Drop Interface

Easily upload images either by dragging and dropping or by selecting an image from your device.

Format Conversion

Convert your image to modern, optimized formats like WebP (recommended), AVIF JPG or PNG.

Supported Formats

Input Formats

• JPG/JPEG
• PNG
• WebP
• GIF
• AVIF
• TIFF
• SVG

Output Formats

• JPG/JPEG
• PNG
• WebP
• GIF
• AVIF
• TIFF

Quality Controls

Adjust the image's quality to decrease the file size by up to 90% (best results with WebP and AVIF).

Live Before/After Comparison

An interactive diff image preview to check the image's quality after compression.

Real-time File Size Comparison

Check the optimized size easily without needing to download.

Why I Built This

I wanted to build an image optimization tool with a clean UI and high compression efficiency while learning more about file handling and image processing in modern web applications.

Getting Started

Clone the Repository

git clone https://github.com/raptorassassin/image-optimizer.git
cd image-optimizer

Install Dependencies

npm install

Run Development Server

npm run dev

---

Open http://localhost:3000 in your browser.

Credits

• Sharp
• Shadcn
• React Diff Viewer