How to Convert HEIC to JPG: In-Browser Client-Side Decoding

The Apple HEIC/HEIF File Anatomy

HEIC is not merely a single raster bitmap format; it is an encapsulated media container built strictly upon ISO Base Media File Format (ISO/IEC 14496-12), housing discrete tiles or keyframes compressed with H.265 / High Efficiency Video Coding (HEVC).

Because browsers refuse native HEVC rasterization on canvas, the payload cannot simply be fed to an Image() element or decoded with createImageBitmap(). Decoding requires compiled C/C++ assemblies compiled into WebAssembly (WASM), executing directly within the page thread or via a Dedicated WebWorker.

Compiling & Bootstrapping libheif in WASM

The reference decoder libheif (paired with de265 or dav1d backends) is compiled down to WebAssembly bytecode with Emscripten. Using SIMD vectors (-msimd128) allows the inverse discrete cosine transforms (IDCT) and dequantization passes to run near bare-metal velocities on modern V8 and SpiderMonkey runtimes.

import libheif from 'libheif-js/wasm-bundle';

// 1. Initialize WASM sandbox within a Dedicated WebWorker thread
const decoder = new libheif.HeifDecoder();

self.onmessage = async (e) => {
  const { fileBuffer, options } = e.data;

  // 2. Parse ISOBMFF header atoms from Uint8Array memory
  const data = decoder.decode(new Uint8Array(fileBuffer));
  const image = data[0]; // Primary display item
  const width = image.get_width();
  const height = image.get_height();

  // 3. Extract raw uncompressed 32-bit interleaved RGBA pixels
  const outputData = new Uint8ClampedArray(width * height * 4);
  await image.display({ data: outputData, width, height }, (displayData) => {
    // 4. Extract attached EXIF metadata payload blocks
    const metadata = image.get_metadata();
    const exifChunk = metadata.find(m => m.item_type === 'Exif');

    // 5. Post buffer back across StructuredClone Boundary without copying
    self.postMessage({
      rgbaBuffer: displayData.data.buffer,
      width,
      height,
      exifBuffer: exifChunk ? exifChunk.data.buffer : null
    }, [displayData.data.buffer]);
  });
};

Preserving the Wide Apple Display P3 Gamut

Modern iPhones capture photos in 10-bit wide-gamut Display P3, offering approximately 25% broader chromatic volume than standard sRGB (specifically saturated greens and luminous reds). Naive conversions dump P3 bytes straight into an sRGB canvas, producing washed-out, lifeless tones.

Lossless EXIF & Geolocation Transplantation

Standard HTML5 Canvas encoding (canvas.toBlob('image/jpeg')) completely wipes out all original metadata tags: GPS coordinates, lens focal length, aperture, exposure bias, and capture timestamp.

To solve this, our in-browser pipeline splices the decoded JPEG byte stream: locating the SOI (0xFFD8) marker, injecting the original APP1 (0xFFE1) segment directly into the binary header before outputting the finalized file.

Client-Side WASM vs. Cloud API Converters

Cloud converters introduce network transport latency, server cold starts, file upload queues, and serious privacy liability. Measuring 50 batch iterations on standard 48-Megapixel iPhone Pro HEIC files (approx. 4.8 MB each):