吴美良

Posted on Aug 11

# I Built a Smart Image Compressor That Auto-Detects the Best Format

#webdev #productivity #javascript #tutorial

We've all been there — staring at a quality slider, wondering if 70% is too low or 90% is too high. Should this PNG stay as PNG? Should I convert to WebP? What even is lossless?

I got tired of guessing, so I built Smart Compress into CompressFast. Drop any image, it figures out the optimal format and quality automatically.

How It Works

The smart analyzer looks at three things:

1. Format

Each image type gets a different strategy:

Input	Smart Decision	Why
PNG (small, likely logo/icon)	Lossless PNG via oxipng	Pixel-perfect, 20-60% smaller
PNG (large, likely photo)	Convert to WebP 75%	70%+ savings, still looks great
JPEG photo	WebP 75%	25-35% smaller, same quality
JPEG huge (>4MP)	WebP 70% + resize to 1920px	90%+ savings for web
GIF	Animated WebP	60-80% smaller, animation preserved
HEIC	WebP	Universal compatibility
SVG	Keep as-is	Vector doesn't need compression

2. Dimensions

If an image is over 2 megapixels, Smart suggests resizing to 1920px wide. Most websites display images at 1200px max — those extra pixels are just wasted bytes.

3. File Size

Larger files get more aggressive compression. A 10MB photo gets different treatment than a 200KB icon.

The Code

The analysis engine is dead simple — just a function that takes file metadata and returns optimal settings:

function analyzeFile(file: FileMeta): SmartRecommendation {
  const pixels = (file.width && file.height) ? file.width * file.height : 0
  const isLarge = pixels > 2_000_000 || file.originalSize > 1_000_000
  const isHuge = pixels > 4_000_000 || file.originalSize > 5_000_000

  if (file.type === 'image/png') {
    if (isHuge) {
      return {
        quality: 75, outputFormat: 'webp',
        resizeWidth: pixels > 2_000_000 ? 1920 : 0,
        reason: 'Large PNG → WebP (photo/screenshot, 70%+ savings)'
      }
    }
    return {
      quality: 100, outputFormat: 'png', lossless: true,
      reason: 'PNG lossless (oxipng — pixel-perfect, 20-60% smaller)'
    }
  }

  if (file.type === 'image/jpeg') {
    return {
      quality: 75, outputFormat: 'webp',
      reason: 'JPEG → WebP 75% (25-35% smaller, same quality)'
    }
  }
  // ... more format handlers
}

The key insight: most images don't need custom settings. A JPEG photo is a JPEG photo. The heuristics are simple because the use cases are predictable.

The UI

Instead of hiding this behind a settings panel, I put it front and center — a purple "Smart" button right next to the existing Max / Balanced / Best presets:

┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────┐
│   📦     │ │   ⚖️     │ │   ✨     │ │   🧠 Smart   │
│   Max    │ │ Balanced │ │   Best   │ │   Auto       │
└──────────┘ └──────────┘ └──────────┘ └──────────────┘

Clicking Smart shows a summary panel explaining exactly what it chose and why. No black box — users can see the reasoning and override if they want.

Privacy: Everything Runs Locally

Like everything in CompressFast, the Smart analysis runs entirely in the browser. The file metadata (format, dimensions, size) is read locally — no data ever touches a server. You can unplug your internet after the page loads and Smart Compress still works.

This is the whole philosophy of the project: compression is a solved problem, but most online tools upload your files to a server first. We do everything client-side with Web Workers and WebAssembly.

Try It

Smart Compress is live now at compressfast.site. Free, no signup, no upload. Drop an image and click the purple Smart button.

If you're curious about the full tech stack (Next.js 14, Zustand, oxipng WASM, Creem payments — all for $0/month), I wrote about it here.

DEV Community