I got tired of uploading my HEIC photos to random servers, so I built a WASM-powered client-side converter

Alex — Sat, 25 Jul 2026 01:04:25 +0000

Hi Dev.to! 👋

Picture this: You are in the middle of a development sprint, a client sends you a batch of assets they took on their iPhone, and you drag them into your project folder.

Suddenly, your build fails. Your browser won't render them. Figma is throwing errors.

They are .heic files.

Apple’s High-Efficiency Image Container (HEIC) is a marvel of compression engineering, saving gigabytes of storage on our phones. But outside the Apple ecosystem? It is an absolute nightmare for web developers and designers.

The architectural sin of most online converters
If you Google "convert HEIC," you are hit with a wall of ad-heavy, SEO-farmed websites. As a developer, using these tools always frustrated me because the underlying architecture makes no sense:

The Privacy Risk: You are taking personal photos, ID cards, or sensitive documents and uploading them to an unknown remote server.

The Bandwidth Tax: Why am I sending a 5MB payload over the network, waiting in a server queue, and downloading it again, just to change a file extension?
The Artificial Limits: "You have reached your limit of 3 free conversions."
Processing an image shouldn't require an HTTP request. Modern browsers have plenty of computing power to handle this locally. So, I decided to build a purely "dev-native" solution.

🚀 Enter HEIC Tools: 100% Local, Zero Uploads
I built a suite of utilities where the conversion engine runs entirely inside your browser's memory.

By offloading the heavy lifting to your local CPU, the files never leave your machine. You could literally load the page, disconnect your Wi-Fi, and it would still process your files perfectly.

Because different workflows require different outputs, I split the engine into three optimized pipelines:

For Web & CMS: When you need maximum compatibility and lightweight assets for a website, run them through the HEIC to JPG pipeline.
For UI/UX Design: When you are importing assets into Figma or Photoshop and cannot afford compression artifacts (or need transparent backgrounds), use the lossless HEIC to PNG converter.
For Document Archiving: If you scanned contracts, whiteboards, or invoices with your iPhone, you don't want scattered image files. You can stitch those frames together into a single, clean document using the HEIC to PDF compiler.

🛠 Under the Hood: WebAssembly & Web Workers
Building this was a fantastic exercise in browser performance management.

To decode Apple's proprietary format in the browser, I utilized WebAssembly (WASM) via the open-source libheif-js module. But if you run a heavy WASM decoding task on the main JavaScript thread, the entire browser UI will freeze.

To solve this, the binary data is passed to a Web Worker, which churns through the decoding in the background.

The tricky part? HEIC isn't just an image; it's a container. A single .heic file can hold multiple frames (like a burst shot, a thumbnail, or a Live Photo). If you blindly export the first frame you find, you might end up with a blurry 256x256 thumbnail.

Here is the extraction logic I wrote inside the Web Worker to dynamically hunt down the highest-resolution frame before rendering it:

// 'decodedFrames' is the array of images extracted by the WASM decoder
let primaryImage = decodedFrames[0];
let maxResolutionArea = primaryImage.get_width() * primaryImage.get_height();

// Iterate through the HEIC container to isolate the main, high-res photo
for (let i = 1; i < decodedFrames.length; i++) {
    let currentArea = decodedFrames[i].get_width() * decodedFrames[i].get_height();

    if (currentArea > maxResolutionArea) { 
        primaryImage = decodedFrames[i]; 
        maxResolutionArea = currentArea; 
    }
}

// 'primaryImage' is now locked in. We draw it to an OffscreenCanvas 
// and export it locally as a Blob.

💡 Why build Single-Purpose Tools?
The web is cluttered with heavy, bloated SaaS apps. I believe there is a massive space for blazing-fast, single-purpose utilities that respect user privacy and do exactly one thing perfectly.

Next time you AirDrop a batch of photos and get hit with that dreaded .heic extension, give it a spin.

I’d love to hear your feedback! Let's chat in the comments if you want to dive deeper into how I handled garbage collection for WASM arrays or managed memory spikes when batch-converting large folders. 👇

DEV Community: Alex

I got tired of uploading my HEIC photos to random servers, so I built a WASM-powered client-side converter