How a HEIC file becomes a JPG inside your browser

A HEIC file, which stands for HEIF (High Efficiency Image Format), is not an image format like JPEG but rather a container that holds an image encoded with HEVC (H.265) codec. Apple introduced HEIC as the default photo format for iPhone cameras in 2017 with iOS 11. This move aimed to provide half the file size compared to JPEG at the same visual quality, along with support for additional features like depth maps, HDR, and image sequences.

The issue arises because most browsers, including Chrome, Firefox, and Edge on Windows, don't have the capability to decode HEIC files due to the patent-encumbered nature of the HEVC codec. Attempting to load a HEIC file directly using an `<img src="photo.heic">` assignment will result in failure.

There are three main ways to handle this situation when you have control over the website:

1. Ask the user to convert the HEIC file to a supported format like JPEG themselves. This option is not ideal as it requires users to have a specific workflow for handling photo files.

2. Upload the HEIC file to a server, convert it to a supported format, and then serve the converted file. While this approach works, it raises concerns about storing the original unreleased product photos on your servers and the additional computational resources required for decoding video frames.

3. Ship a decoder to the browser and perform the conversion locally. This option may seem costly in terms of bandwidth, but it saves resources by avoiding the need to decode multiple photos on the server side.

The most practical approach is to ship the decoder only when needed. To achieve this, you can load the decoder on demand, after confirming that the file is indeed a HEIC. The decoding process involves checking the file's header, which begins with a box header and includes a brand identifier in a fixed offset. By comparing this ASCII string against known HEIF brands, you can determine if the file is indeed a HEIC.

Once the decoder is loaded, you can convert the HEIC file to a supported format like JPEG using the following code snippet:

```javascript

let decoderPromise = null;

function loadDecoder() {

decoderPromise ??= new Promise((resolve, reject) => {

const s = document.createElement('script');

s.src = '/vendor/heic2any.min.js';

s.onload = () => resolve(window.heic2any);

s.onerror = reject;

document.head.appendChild(s);

});

}

async function toJpeg(file) {

const decoder = await loadDecoder();

const jpgBlob = await decoder({ blob: file, toType: 'image/jpeg', quality: 0.92 });

}

```

Some important considerations while implementing this solution include decoding files one at a time to avoid exceeding the browser's memory limit, maintaining high quality during conversion (a quality factor of 0.92 is recommended), respecting the photo's orientation by not altering it during the decoding and re-encoding process, and first attempting the native path (using `createImageBitmap`) before falling back to the JavaScript decoder.