Building image & video conversion that never leaves the browser
How VisualRefiner converts HEIC, compresses images, and transcodes video with no server, no upload, and no account — using the Canvas API, WebCodecs, and a little WebAssembly. Most "free online converters" work like this: you pick a file, it's uploaded to a server, converted there, and sent back. That's fine for a meme. It's less fine for a folder of personal photos, a passport scan, or client…
VisualRefiner is a browser-based tool that converts HEIC images, compresses photos, and transcodes video without uploading files to a server. This is in contrast to most free online converters, which upload files to a server, convert them there, and then send the converted files back. VisualRefiner keeps all conversions within the browser tab on the user's own machine, ensuring that files never leave the device.
The conversion process relies on the Canvas API, WebCodecs, and a bit of WebAssembly. The Canvas API is a built-in format converter, allowing images to be decoded into ImageBitmaps, drawn onto a canvas, and re-encoded into different formats such as PNG, JPG, or WebP. By passing a quality argument, the same function can also compress images.
However, HEIC (the default format for iPhone photos) cannot be read directly by the Canvas API. To handle this, VisualRefiner uses libheif compiled to WebAssembly (via heic2any) to decode HEIC files into a format that the Canvas API can work with. This HEIC decoder adds about 2 MB to the site's weight, but is only loaded on demand when a user converts a HEIC file.
For resizing high-quality images, VisualRefiner uses pica, which performs Lanczos-style resampling. Like libheif, pica is also loaded lazily, only when a user needs to resize an image.
Video conversion is handled through WebCodecs, which offer hardware-accelerated encoding and decoding. Instead of relying on a large download like ffmpeg.wasm, VisualRefiner uses mediabunny to transcode clips to MP4 or WebM, extract frames as PNG, or create GIFs using gifenc. This approach reduces the required download size and improves performance, although it may not work for every exotic video input due to browser support differences.
The entire site is a statically exported Next.js app served from a CDN. As a result, there is no backend to send files to or any server-side processing. The privacy claim that "your files never leave your device" is therefore easily upheld.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
