Coping with HEIC in the browser

by @edent | # # # | 3 comments | Read ~216 times.

Apple’s HEIC format is… annoying. At the moment, Apple’s products are the only mainstream cameras which use it. Forums are littered with people trying to upload HEIC files to web services and failing.

So, here are four quick tips for dealing with this formal.

Display in browser

Absolutely no browser supports HEIC. Not even Apple’s own browser supports it. Why?

So, we have to use JavaScript. There’s a brilliant open source library called libheif. It’s possible to compile it to JavaScript – but I couldn’t get it to work. The official repo doesn’t make a compiled version available. Luckily, Kiril Vatev has released a compiled emscripted version.

It’s about 1.5MB – which is a bit abusive to your users – although it zips down to about 350KB.

The image has to be loaded into a 2D canvas to be rendered. Even on a modern laptop this is likely to take a few seconds.

There’s a demo page which shows you how to get started. It’s tedious, but it works.

Get Metadata

Similarly, there’s a separate library for reading HEIC metadata. This one is a much more reasonable 20KB.

That’s pretty easy to use – and quick. HEIC contains pretty standard EXIF. GPS co-ordinates, camera information, that sort of thing.

Server Side – PHP

I struggled to find any libraries which were easy to use. It turns out, good old imagick has support in modern versions.

$imagick = new Imagick();
$imagick->readImage('image.heic');
$exifArray = $imagick->getImageProperties("exif:*");
var_dump($exifArray);

Use a CDN to convert images

I use Cloud Image (Affiliate Link). Use it proxy your images. You can convert them to JPG or a modern format like WebP. It can resize and other effects.

You can write something like:

<img src="https://abc.cloudimg.io/v7/example.com/image.heic/?w=600"/>

to serve your HEIC images in a more sensible format.

What next?

HEIC is a weird, patent-encumbered format. It isn’t particularly useful. If you want high-quality images for editing, you probably want to shoot in RAW. If you’re displaying on the web, WebP gets you a small file size and broad compatibility.

But, if you want to deal with HEIC, I hope the above was useful.

3 thoughts on “Coping with HEIC in the browser

  1. I had no idea that Apple were using a proprietory photo format in iOS11 and above now … Although given that their devices (still true AFAIK) can’t play webm video (grrr!) this probably shouldn’t have come as a surprise …

    1. Pierre says:

      Safari is notoriously bad at supporting modern media formats, but even then it’s still surprising that Apple’s own browser can’t display photos taken on iPhones.

  2. Daniel says:

    The Samsung Camera app has checkboxes for HEIF for images and HEVC for videos. Off by default.

    Although, I expect the world will settle on AVIF/AV1. No patent issues and smaller files.

Leave a Reply

Your email address will not be published. Required fields are marked *