TL;DR
Go to compare.rokka.io/_compare and compare the output of the HEIF, JPEG and WebP formats. Even upload your own pictures. All done with rokka.
Long version
Apple produced quite some hype with their support for the HEIF image format in the upcoming iOS 11 and macOS High Sierra. HEIF (High Efficiency Image File Format) is a new image file format, which supports many use cases and uses HEVC for the compression part, also known as H.265. Apple is using HEIF on their latest devices as a replacement for storing pictures and claims up to 50% saves on storage.
Even though no browser does support HEIF yet, also not Safari in the current betas, we nevertheless thought it would be cool to add HEIF support to rokka – our image storage and delivery service. And so we did.
Unfortunately there's no out-of-the-box solution to create HEIF files currently. But Ben Gotow‘s site jpgtoheif.com inspired us. He published instructions how to create HEIF files with the help of ffmpeg, x265 and Nokia's heif writerapp. But due to the uncommercial-only license of that Nokia code, we use GPAC to create the HEIF container, which is published under the LGPL license.
Looking at and comparing HEIF compressed images
What's the fun, when almost no one can look at the result? So we built a little site, where you can compare the output of rokka's HEIF, JPEG and WebP (the later is only supported on Chrome) and even upload your own pictures. Just head to
and enjoy it. The uploaded images will be deleted from time to time.
The site uses Nokia's HEIF Reader JavaScript Implementation, which decodes a HEIF image in JavaScript to a canvas element. This way, everyone can look at HEIF images and compare them to JPEG and WebP output.
The site also allows you to play with different quality settings. All formats support a setting from 1 to 100. 1 is the lowest and 100 the highest (also means lossless for WebP). The different quality settings for the different formats don't really correspondent to each other. Just play around with them and compare the sizes of the images with different settings.
We use pretty much the default settings of ffmpeg, maybe some stuff could be improved on that side. And we also don't know what kind of encoder Apple is using for generating HEIF images. So don't really compare the compression we produce for HEIF images with what maybe other encoders can do.
Also be aware, that we asynchronously compress JPEG images in the background with mozjpeg (see the rokka docs for details), so the first render output is not the maximized compression we can get for JPEG images. Just hit the render button 10 seconds later to get the final compression (the site will inform you, when it's not done yet with that compression step).