DEV Community

Cover image for 📉 Image Compressor: Batch compress JPG · PNG · WebP · GIF · BMP · AVIF, with before/after compare
Tomaz
Tomaz

Posted on Originally published at tooladda.online

📉 Image Compressor: Batch compress JPG · PNG · WebP · GIF · BMP · AVIF, with before/after compare

⚡ 10-second version

Drop a folder's worth of images into tooladda.online/image-compressor.html, pick a mode, and pull down a ZIP. Every file is processed on your own machine — including the 40-photo batch that would take twenty minutes to upload.

❗ Important

Photos carry EXIF metadata: GPS coordinates, device model, timestamp. Uploading holiday or family photos to a compression site hands all of that to a stranger. Here nothing is transmitted, so there's nothing to hand over.


🎚️ Where the quality/size curve actually bends

JPEG quality is not linear, and this is the single most useful thing to know about compressing images. Going from quality 100 → 85 typically removes more than half the bytes while the difference is invisible at normal viewing size. Going 85 → 70 saves much less and starts showing visible artefacts around sharp edges and text.

Quality Typical size vs q100 What you see
100 100% Nothing gained over 90 — you're storing noise
90 ~50–60% Indistinguishable for photos
85 ~40–50% 🎯 The sweet spot for web use
75 ~30% Slight softening; fine for thumbnails
60 ~20% Visible blocking near edges and text
40 ~12% Obviously degraded

The trap: generation loss

JPEG is lossy and cumulative. Every save re-quantises the image, and the damage never comes back:

original.jpg → compress → compress again → compress again
    crisp         fine        softening       mush
Enter fullscreen mode Exit fullscreen mode

Always compress from the original, never from an already-compressed copy. This is also why editing and re-saving the same JPEG repeatedly slowly destroys it.

Pick the right format

Use Format Why
Photographs JPEG or WebP Lossy compression is designed for continuous tone
Screenshots, logos, text, sharp lines PNG or WebP lossless JPEG smears text edges badly
Transparency needed PNG or WebP JPEG has no alpha channel at all
Smallest modern web delivery AVIF / WebP Meaningfully smaller than JPEG at equal quality

⚠️ Warning

Never save a screenshot containing text as a JPEG. The artefacts cluster exactly on high-contrast edges — which is what text is entirely made of. PNG or WebP, every time.


🧭 How it works

Diagram


✨ What's inside

### 📦 Real batch processing Dozens of files in one pass, out as a single ZIP. No uploading each one and waiting for a server queue. ### 👀 Before/after comparison Judge with your eyes at full size before committing. Compression numbers mean nothing if the result looks wrong.
### 🎚️ Three honest modes High Quality, Balanced and Maximum Compression — plus resize, because halving the dimensions saves far more than any quality slider. ### 🔄 Six formats in, sensible format out JPG, PNG, WebP, GIF, BMP and AVIF read natively; convert to a better-suited format as part of the same step.

🛠️ Real jobs

Situation What you do
🌐 Site loading slowly Compress every image on the page; usually the single biggest speed win available.
📧 Email attachment limit 30 photos under 25 MB total, in one batch.
📤 Upload form capping each file Compress to fit without opening Photoshop.
🛒 Product listing images Consistent, fast-loading photos across a whole catalogue.
💬 Sharing without quality loss Compress once, properly — instead of letting a messaging app mangle it.
💾 Reclaiming disk space Batch a photo archive down at a quality you actually chose.

📖 Five steps

1.  Open    →  tooladda.online/image-compressor.html
2.  Drop    →  all your images at once (use the ORIGINALS)
3.  Mode    →  Balanced for web, High Quality for print
4.  Resize  →  also cut dimensions if they're bigger than needed
5.  Compare →  check before/after, then download the ZIP
Enter fullscreen mode Exit fullscreen mode

▶ Start compressing — tooladda.online/image-compressor.html

💡 Tip

Before touching quality, ask how big the image needs to be. A 4000 px photo displayed in a 800 px column is wasting 96% of its pixels — resizing beats compressing, and you can do both here in one pass.


❓ FAQ

Is it free? Any file limit?

Free, no watermark, no signup. The batch limit is your device's memory, not a plan tier.

Are my photos uploaded?

No. They're read and re-encoded in your browser. EXIF, GPS and all, they never leave your device.

What quality should I use for a website?

Balanced (around JPEG q85) is the right default for photographs. Resize to the display size first for the bigger win.

Why did compressing again make it look terrible?

Generation loss — JPEG damage accumulates with every save. Always start from the original file.

PNG or JPEG?

Photographs → JPEG/WebP. Screenshots, logos, text or anything needing transparency → PNG/WebP. Putting a text screenshot in JPEG is the classic mistake.

Should I use AVIF or WebP?

Both beat JPEG substantially at the same visual quality. WebP has the broadest support; AVIF usually goes smaller. For a website, serve a modern format with a JPEG fallback.

Does it strip EXIF?

Re-encoding typically drops most metadata, which is usually what you want before publishing a photo. Nothing was ever sent anywhere regardless.


🔬 Under the hood

  • Canvas + codec re-encoding in the browser, vanilla JavaScript, no upload endpoint.
  • Batch work is queued so the UI stays responsive on large sets.
  • ZIP assembled client-side.
  • Offline-capable once loaded.

Originally published on ToolAdda, where Image Compressor runs free in your browser — nothing is uploaded, nothing leaves your device.

Top comments (0)