{"id":7359,"date":"2022-09-12T11:46:23","date_gmt":"2022-09-12T10:46:23","guid":{"rendered":"https:\/\/www.bronco.co.uk\/our-ideas\/?p=7359"},"modified":"2022-09-12T11:46:23","modified_gmt":"2022-09-12T10:46:23","slug":"supporting-heic-images-on-websites","status":"publish","type":"post","link":"https:\/\/www.bronco.co.uk\/our-ideas\/supporting-heic-images-on-websites\/","title":{"rendered":"Supporting HEIC images on websites"},"content":{"rendered":"\n

What are HEIC images<\/h2>\n\n\n\n

HEIC is Apple’s own version of the High-Efficiency Image File format (HEIF) which offers even more compression than the JPEG format without sacrificing quality meaning even smaller files. HEIC became the default photo file format on iOS 11 but at the time almost no website supported uploading these type of images. Things have improved slightly since then but there is still no support on most browsers meaning anyone wanting to support them needs to convert them to either JPEG or WEBP first.<\/p>\n\n\n\n

Debian 10 (“Buster”) was the first Debian Linux distribution to offer some support but as you will see some solutions work better than others.<\/p>\n\n\n\n

Using Imagick<\/h2>\n\n\n\n
sudo apt-get install php-imagick<\/code><\/pre><\/div>\n\n\n\n
Using the php-imagick library to process HEIC images in our tests only worked some of the time. A simple example shown below to convert an HEIC image to a JPEG generated errors for about half the HEIC images we tried<\/p>\n\n\n\n
<?php\nif (isset($_FILES['file']))\n\t{\n\t$size\t\t= isset($_REQUEST["w"]) ? $_REQUEST["w"] :800 ;\n\t$source \t= $_FILES['file']['tmp_name'];\t\n\t$output\t\t= $_SERVER["DOCUMENT_ROOT"]."\/tmp\/".time().".jpg";\n\t\n\t$imagick \t= new Imagick($source);\n\t$imagick->resizeImage($size,0,Imagick::FILTER_LANCZOS,1);\n\t$imagick->setImageFormat('jpg');\n\t$imagick->setCompressionQuality(80);\n\t$imagick->writeImage($output);\n\n\t$image_data\t= file_get_contents($output);\n\t$base64 = "data:image\/jpeg;base64,".base64_encode($image_data);\n\tunlink($output);\n\n\techo("<p><img src=\\"$base64\\" alt=\\"\\"\/><\/p>");\n\t}\n\t?>\n    \n    <form id="myinventory" method="post" action="\/heic2.php" enctype="multipart\/form-data">\n\t<input id="photo" type="file" name="file" onchange="document.forms[0].submit()"\/>\n    <\/form>    <\/code><\/pre><\/div>\n\n\n\n
Several sites on Google suggested compiling Imagick with HEIC support but everything appeared set up correctly on the server so I’m not sure what the issue was:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Using LibHeif<\/h2>\n\n\n\n
The most reliable solution we found in testing was to use the libheif library instead.<\/p>\n\n\n\n
apt-get install libheif1<\/code><\/pre><\/div>\n\n\n\n
<?php\nif (isset($_FILES['file']))\n\t{\n\t$size\t\t= isset($_REQUEST["w"]) ? $_REQUEST["w"] :800 ;\n\t$source \t= $_FILES['file']['tmp_name'];\t\n\t$output\t\t= $_SERVER["DOCUMENT_ROOT"]."\/tmp\/".time().".jpg";\n\t\t\n\tshell_exec(escapeshellcmd("\/bin\/heif-convert -q 80 ".$source." ".$output));\n\t\n\t$image_data = file_get_contents($output);\n\t$base64     = "data:image\/jpeg;base64,".base64_encode($image_data);\n\tunlink($output);\n\n\techo("<p><img src=\\"$base64\\" alt=\\"\\"\/><\/p>");\n\t}\n\t?>\n    \n    <form id="myinventory" method="post" action="\/heic2.php" enctype="multipart\/form-data">\n\t<input id="photo" type="file" name="file" onchange="document.forms[0].submit()"\/>\n    <\/form>    \n<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
What are HEIC images HEIC is Apple’s own version of the High-Efficiency Image File format (HEIF) which offers even more compression than the JPEG format without sacrificing quality meaning even smaller files. HEIC became the default photo file format on iOS 11 but at the time almost no website supported uploading these type of images. […]<\/p>\n","protected":false},"author":1,"featured_media":7370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"class_list":["post-7359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/7359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/comments?post=7359"}],"version-history":[{"count":0,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/7359\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media\/7370"}],"wp:attachment":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media?parent=7359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/categories?post=7359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}