Coping with HEIC in the browser
By @edent
· HTML images web dev · 14 comments · 500 words · read ~9,367 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:
HTML
<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.
Mastodon
Facebook
LinkedIn
BlueSky
Threads
Reddit
HackerNews
Lobsters
WhatsApp
Telegram
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 ...
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.
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.
Actually when using a regular file input that accepts type image/jpeg the file is converted by iOS automatically to jpeg.
I implemented this in https://heicdrop.kasperkamperman.com. A free web app to directly send jpegs with AirDrop to your Mac.
Many thanks for this. I’m hitting this problem on desktops. Not on iPads which maybe due to what Kasper is saying. My current ‘solution’ is to recommend people change their default photo format to ‘most compatible’ on their phones. Not great but…
This feels like jumping through hoops to put a round peg in a square hole. There are dozens of image formats, but only three that are supported in web browsers. That's what web standards dictate.
HEIC is an internal storage format only - it's never been intended for use outside of Apple Photos. If you export an image, it's converted to JPG. When I export from Apple Photos, HEIC is not even an option.
No web browser should do things outside of web standards - the first 15 years of the web were a hell of proprietary shenanigans that we're thankful to be past (so please don't ask why Safari doesn't support HEIC - that's the last thing we should want!)
So, two questions:
1) How in the world are you getting images out of your phone or Apple Photos that are still in HEIC format? How were they not auto-converted to JPG?
2) Why do you want to display a non-standard format in the browser rather than convert it first like you would with, say, a TIFF?
@edent says:
1) Lots of people hit the "upload" button on websites and Apple sends a HEIC file. It's a complaint I frequently get from users.
2) I was wondering if it was possible. Introducing a lossy conversion step can degrade image quality.
@edent What I'm saying is that in normal usage, hitting the Upload button on MacOS or iOS should never result in a HEIC file being uploaded - Apple has built in lots of protections to prevent that from happening - JPG conversion is automatic. I did some research this morning and found one article speculating on why this happens sometimes - some users back up their library with tools like Dropbox to another location. If they were to upload from Dropbox rather than normally from their Photos library, the auto-conversion would not happen. That's the closest I found to an explanation anyway. Apple has carefully designed things so that this should never happen, but if files "leak" out of their container, it does. And apparently it happens more often than I thought!
1) Lots of people hit the "upload" button on websites and Apple sends a HEIC file. It's a complaint I frequently get from users.
^ I think there is something wrong with the implementation of the form then. Because Heicdrop (https://heicdrop.kasperkamperman.com) actually doesn't convert anything. It just makes use of the fact that iOS makes a JPEG out of a selected photo automatically.
You have to make sure that you add the attribute accept="image/*" to the input field.
@edent says:
I don't have an iPhone. I just go by what users tell me. I don't know if they're uploading from the phone or dragging off to a desktop. This - https://appletoolbox.com/how-to-avoid-heic-format-when-transferring-photos-from-your-iphone/ - seems to suggest it's a problem.
Kasper Kamperman says:
If I transfer photos from iPhone to MacOS with regular Airdrop, they are in HEIC format. If a user then drops that on a Desktop system to the file upload, I think it will stay in HEIC.
I think it's the job of a developer to deal with those use cases. Can be annoying sometimes, to support multiple platforms, however that's part of the deal on the web.
@edent says:
Yes. That's why I wrote a blog post a couple of years ago about how to do it...
Not tested this yet but I did read that when uploading from Photos it’ll convert but if you upload fro Files it doesn’t. Not a iPhone user either so tricky to test!
Well, I got sufficiently annoyed by this that I made a WordPress plug-in that deals with the transformation either on the back-end (if your server software is sufficiently up to date) or on the front-end (using the WebAssembly port of libheic that you mention). Bonkers! Experimental! But it works (for me, ha!) https://github.com/sole/wp-reliably-heic
Thank you for the write-up. It really helped me to get started on what options were there! Cheers 🙂