Take a course or start your CPD log

Share

How to add support for next generation file formats: HEIF and WEBP

HEIC is the name chosen by Apple for the new HEIF file format. HEIF stands for High Efficiency Image Format. It allows for images to maintain the same quality as .jpgs but at a fraction of the file size. Phones are now starting to use this file format as default (often users don't even know their photos are being saved in this file format) so it's important that websites allow these files to be uploaded and are able to process them correctly.

This is why we've added support to the Iszy uploader as standard. Offering the widest choice of uploading options and supporting the latest formats as they emerge is a major advantage of using an embedded uploader such as Iszy.ai. Let us do the complicated server configuration and coding and just add a little upload form to your website to accept the new formats.

The technical bit:

If you're interested in learning how we added support for heic and webp then read on. If the thought of using the command line scares you (or you literally don't know what I'm talking about) please stop reading now!

To enable support for HEIC and WEBP files we have moved our image generation from the standard PHP GD libraries to ImageMagick. It wasn't 100% straight forward to install ImageMagick with HEIC and Webp support on AWS, so I thought I'd document the steps here incase it's useful for someone else out there. Some of these steps might be overlapping and might not all be necessary, but it took a bit of trial and error to get this working, so without spending more hours on it I'll just put everything down incase it's useful.

1. There are a few dependencies you need to install and you might have more, depending on what you've got installed already. But we needed to install the following:

> sudo yum install libtool
> sudo yum install gcc-c++

 

2. Next you need to build libheif and libde265. This is a little more involved than just using a package manager unfortunately, but it's not too difficult when you get the right configure options.

> git clone https://github.com/strukturag/libde265.git  
> cd libde265/ 
> ./autogen.sh 
> ./configure 
> export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig
> make
> sudo make install 
> git clone https://github.com/strukturag/libheif.git 
> cd libheif/
> ./autogen.sh 
> ./configure 
> make
> sudo make install 

 

The important thing, and where it went wrong for me a few times, was to check that libheif is working correctly with libde265. To check this you can run:

> pkg-config libheif --variable builtin_h265_decoder

 

The output should be 'yes'.

If you found this article helpful, get more of this by joining our mailing list.

3. Install with Webp support

> wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.1.0.tar.gz
> tar xvzf libwebp-1.1.0.tar.gz
> ./configure
> make
> sudo make install
> sudo yum install libwebp-devel.x86_64

 

4. Install Imagemagick

> sudo yum install ImageMagick-devel
> sudo yum install php-devel
> sudo pecl install imagick
> git clone https://github.com/ImageMagick/ImageMagick.git
> cd ImageMagick/
> export LDFLAGS=-L/usr/local/lib
> export CPPFLAGS=-I/usr/local/include/libheif
> ./configure --with-heic=yes --with-jpeg=yes  --with-webp=yes
> make
> sudo make install

 

5. Update your php.ini file to include the extension. Just add the following line to the end of the file.

extension=imagick.so

 

6. Test your installation. For this I downloaded a sample heic file and used mogrify to see if it worked.

> mogrify -format jpg sample1.heic

 

Hopefully the output should be a jpg file. If not, the following links should hopefully be useful.

7. Restart your webserver and PHP services.

> sudo service php-fpm restart
> sudo service httpd restart

 

Useful resources:

https://medium.com/@veelenga/heif-converter-on-aws-lambda-3674afb4e59d
https://matthi.net/main/2019/08/16/fedora-imagemagick-heic.html
https://askubuntu.com/questions/1131996/problems-with-compiling-imagemagick-with-heic
https://github.com/serverlesspub/imagemagick-aws-lambda-2/blob/7cb5d75ccb002050bdf5c1cdf6eec3a27f87a9d8/Makefile_ImageMagick
https://www.codegrepper.com/code-examples/whatever/imagemagick+convert+heic+to+jpg
https://github.com/ImageMagick/ImageMagick/issues/1140
https://github.com/libvips/libvips/issues/1511

Tom
by Tom

Tom, Technical Director at 18a, has a degree in Computing and Information Systems and 20 years of commercial coding experience building websites, applications and tools for government departments and businesses all over the world. It was during his third year at university whilst working in industry that he discovered his passion for the web and hasn't looked back since.

Photo: Joel Mott

Would you like to give your digital knowledge a boost? Join our mailing list.