Converting Images Entirely in the Browser: No Uploads Needed

Most "free online image converters" work the same way: you upload a file, a server processes it, and you download the result. That's fine until the image is a passport scan, a client mockup, or a personal photo you'd rather not send to an unknown server.

Modern browsers can do this work locally. Here's how the client-side approach works.

Decoding and re-encoding with the Canvas API

The core loop is simple:

1. Read the file with createImageBitmap(file) (or a FileReader).
2. Draw it onto a <canvas> (or an OffscreenCanvas in a worker).
3. Export with canvas.toBlob(callback, 'image/webp', 0.8).

toBlob handles format conversion (PNG, JPEG, WebP, and AVIF where the browser supports encoding it), and the quality argument gives you lossy compression for free. Resizing and cropping are just different arguments to drawImage.

Formats the canvas can't handle

HEIC isn't natively decodable in most browsers, so it needs a WebAssembly decoder (libheif compiled to WASM is a common choice). DPI is another gap: canvas output drops physical-resolution metadata, so changing DPI means writing the pHYs chunk in PNGs or the JFIF/EXIF density fields in JPEGs yourself.

Trade-offs

• Privacy: the file never leaves the device, and you can verify that in DevTools' Network tab.
• No size caps: the only limit is the user's memory, not a server bill.
• Speed: there's no upload or download round trip, though very large images can be slow on low-end phones. A Web Worker keeps the UI responsive.
• Consistency: encoder output differs slightly between browsers.

I put these ideas together in MyToolsBench, a set of free image tools (converter, compressor, resizer, crop, DPI changer) that run entirely in the browser with no sign-up. Whether you use it or build your own, try the client-side approach next time you reach for an upload endpoint.