Instant Image Compressor

Bolt

Compress your images instantly in-browser with this raw, colorful brutalist web app. Upload, preview original and compressed images, choose compression levels, and download — all with no login or server required. Built using Bolt in one shot to create this project utilize React, TailwindCSS, and browser-image-compression.

View Project →

“Build a fully client-side Image Compressor Web App using React, TailwindCSS, and the browser-image-compression library.

🖼 Features:
User uploads an image (JPG/PNG/WEBP) via file input or drag & drop

Image is compressed in-browser — no backend, no server

Display:

Original image preview + size

Compressed image preview + size

Compression ratio (% reduced)

User can choose compression level (Low, Medium, High) via slider or buttons

Provide a Download Compressed Image button

Optional: allow drag & drop upload with file preview

🎨 UI Design Style: Brutalist + Colorful
Combine brutalist structure with vibrant color blocks.

Use thick borders (4–8px) around each section

Bold colors per section: e.g.,

Upload area = bright yellow

Original image = cyan

Compressed image = red or green

All-caps monospace font (e.g., Space Mono, Courier New)

No border-radius, no soft shadows — use raw layout

Show sizes in monospace badges (e.g., 132KB → 45KB)

Use black/white text on saturated backgrounds for contrast

Buttons should be blocky, uppercase, bordered, and invert color on hover

Background can be white or grayscale with strong color sections

🛠 Tech Stack:
React

TailwindCSS

Framer Motion for subtle fade-in/slide animations (optional)

browser-image-compression for client-side compression

(Optional) react-dropzone for drag & drop

🔧 Layout:
mathematica
Copy
Edit
[Header: IMAGE COMPRESSOR]
[Upload Box (drag & drop or button)]
[Compression Level: Low / Medium / High]
[Original Image + File Size]
[→ Compression Process (show progress bar or spinner)]
[Compressed Image + File Size]
[Download Button]
✅ Notes:
No login, no database, no tracking — everything stays on the user's browser

Use FileReader and Blob APIs to handle image display and download

Use setTimeout or animation delay to simulate processing time

Ensure responsiveness across screen sizes

Add accessible labels, aria-describedby, and proper alt text for previews

SEO Meta:

<title>: “Compress Images Instantly – Brutalist Web Tool”

<meta name="description">: “Free in-browser image compressor with raw brutalist design. Drop an image, compress, and download instantly.””

0 views

Instant Image Compressor

Instant Image Compressor

Comments