Build a client-side image compressor in 5 minutes

Subarnadip Pal — Thu, 25 Sep 2025 20:09:36 +0000

You can compress images directly in the browser using a tiny SDK (no servers needed).
Add one script, wire a file input, and call a single function.
Works with JPEG/WEBP/PNG, supports target KB, resizing, and auto-quality.
What we’ll build

A simple page where users:
Pick an image
Choose target size and format
Click “Compress”
Preview the result and download it
Why client-side compression?

Privacy: Images never leave the device
Speed: Instant feedback, no network roundtrips
Simplicity: No servers, queues, or rate limits

Add the SDK Drop this script into your page (hosted by ImgSmaller):
The SDK exposes a global object: ImgSmaller.SDK with one main method: compress.

Add basic HTML We’ll need a file input, some controls, and a place to preview results.

Wire up the JavaScript A few lines to load the image, compress it, and show the preview.

Customize the output You can pass more options to compress:
targetKB: desired size in KB (default 100)
mime: 'image/jpeg' | 'image/webp' | 'image/png'
width, height: optional resize (numbers)
auto: true|false — prioritize visual quality over exact size
background: '#ffffff' (useful for JPEG when source has transparency)

Example:

const res = await ImgSmaller.SDK.compress(file, { targetKB: 80, mime: 'image/webp', width: 1280, // optional resize auto: true, // quality-first background: '#fff', // fill background for JPEG });

Demo: https://codepen.io/subarnadip/pen/qEbOeXg

How it works (under the hood)

Loads the image into a Canvas
Optionally resizes
Runs a quick binary search on the quality to approximate your target size
Produces a Blob + Object URL for preview/download
All in the browser—no server calls required
Caveats

Very large images may be memory-heavy in low-end devices; consider resizing first
PNG is lossless; “quality” doesn’t apply. Use JPEG/WEBP for size targeting
WEBP support depends on the browser (most modern browsers support it)
That’s it! You just built a client-side image compressor with a few lines of JavaScript. If you want a production-ready compressor with bulk support, exact KB presets, and a user-friendly UI, try ImgSmaller:

https://imgsmaller.com

Credits

SDK: https://imgsmaller.com/sdk/imgsmaller.js (MIT)
Demo snippet works on any static host or code playground

DEV Community: Subarnadip Pal

Build a client-side image compressor in 5 minutes