WordPress 6.7 has finally added support for HEIC images? Let's talk about WebP Cloud's support for HEIC.

On the Can I use website, HEIC images are described as follows:

A modern image format based on the HEVC video format. HEIC generally has better compression than WebP, JPEG, PNG and GIF. It is hard for browsers to support HEIC because it is complex and expensive to license. AVIF and JPEG XL provide free licenses and are designed to supersede HEIC.

The part “HEIC is complex and expensive to license” references the link: https://en.wikipedia.org/wiki/High_Efficiency_Video_Coding#Patent_licensing

Since iOS 11, photos taken by iPhones are stored in HEIC format by default unless specified otherwise:

Considering the market share of iPhones, a significant number of images/videos are stored in HEIF/HEVC formats, leading to a high demand for HEIF/HEVC to JPG/MOV/MP4 conversions. Many people frequently search online for “Why can’t I open photos taken on my iPhone on a Windows computer?” or “How to convert HEIC to JPG.”

This is also true for content publishers. Let’s see which browsers currently support HEIC images:

If you directly publish HEIC images on a blog, only users with Safari can view them, while others cannot. Therefore, to ensure that other browsers can see the images, content creators need to manually convert the images to JPG before publishing. After all, JPG is universally supported as of 2024. However, this approach presents several issues:

1. Converting to JPG is cumbersome, requiring manual conversion each time, resulting in two images locally: one in HEIC format and the other in JPG.
2. JPG is relatively outdated compared to formats supported by modern browsers. HEIC’s advantage is its high compression efficiency (meaning smaller image sizes). Converting to JPG makes the image larger again. Should we then manually compress it to WebP?

How WordPress Handles It

WordPress, which powers 42% of websites globally, recently released the 6.7 update, which supports HEIC format:

In the commit note at https://github.com/WordPress/wordpress-develop/commit/471a619, we see:

Media: Automatically convert HEIC images to JPEG Automatically create a JPEG version of uploaded HEIC images if the server has a version of Imagick that supports HEIC. Conversion is done silently through the existing WP_Image_Editor infrastructure that creates multiple sizes of uploaded images.

This allows users to view HEIC images in WP Admin and use them in their posts and pages regardless of whether their browser supports HEIC. Browser support for HEIC is relatively low (only Safari) while the occurrence of HEIC images is relatively common. The original HEIC image can be downloaded via a link on the attachment page.

What WordPress does here is to support uploading HEIF images in the media library, and convert them into JPG format and output them in the background (if your server has Imagick installed that supports HEIC, if you are using the official image wordpress for deployment, it is included). For example, our WordPress demo site: https://wordpress.webp.se/fk7-running-shanghai-tianma/ uploaded a HEIF photo, the path is as follows:

https://wordpress.webp.se/wp-content/uploads/2023/06/sample3.heic

After uploading to WordPress, it automatically replaced the image with:

https://wordpress.webp.se/wp-content/uploads/2023/06/sample3.jpg

https://wordpress.webp.se/wp-content/uploads/2023/06/sample3.jpg

By observing the WordPress storage directory, we can see that WordPress converted sample3.heic to various sizes of JPG images in the background.

-rw-r--r-- 1 www-data www-data 110K Nov 15 01:01 sample3-1024x683.jpg
-rw-r--r-- 1 www-data www-data 5.4K Nov 15 01:01 sample3-150x150.jpg
-rw-r--r-- 1 www-data www-data 237K Nov 15 01:01 sample3-1536x1024.jpg
-rw-r--r-- 1 www-data www-data 408K Nov 15 01:01 sample3-2048x1365.jpg
-rw-r--r-- 1 www-data www-data  12K Nov 15 01:01 sample3-300x200.jpg
-rw-r--r-- 1 www-data www-data  64K Nov 15 01:01 sample3-768x512.jpg
-rw-r--r-- 1 www-data www-data 527K Nov 15 01:01 sample3.heic
-rw-r--r-- 1 www-data www-data 619K Nov 15 01:01 sample3.jpg

This WordPress update saves the trouble of manually converting to JPG each time and maintaining two images locally, as mentioned earlier. However, it’s still not ideal.

Slightly More Modern Image Formats

As developers of WebP Cloud and WebP Server Go, we frequently work with various image formats. Currently, mainstream image formats include: JPG, PNG, AVIF, WEBP, HEIC, and JXL. JPG and PNG are well-known, so let’s look at the browser support for the other formats:

AVIF

JPEG XL

WebP

WebP is almost universally supported. AVIF offers better compression rates but isn’t as widely supported as WebP. JPEG XL, a competitor to AVIF, offers more features and slightly better compression efficiency than AVIF, but its browser support is similar to HEIC.

With so many image formats, how should we choose to provide the best visitor experience?

WebP Cloud works as follows:

1. Convert and compress the original image (we support JPG, PNG, AVIF, WEBP, HEIC, NEF as source images) into various formats. For example, an original PNG image will be processed into both WebP and AVIF formats.
2. When a visitor accesses the site, we query the browser’s supported image formats based on the Accept and User-Agent headers.
3. From the WebP Cloud local cache, we select and output the smallest supported image format for the visitor (continuing to use the original URL). The smallest size is chosen because sometimes a WebP image might be smaller than an AVIF image, in which case the WebP image should be output.

Note that WebP Cloud and WebP Server Go both support HEIF as an input image format (we might be the only ones on the market along with imgproxy?). We observed several similar products and compiled the following table:

For example, on our WordPress demo site with WebP Cloud enabled, HEIC images can be output directly without changing the file extension (even with our watermark):

https://7bd7ce9.webp.ee/wp-content/uploads/2023/06/sample3.heic

Additionally, to handle different resolutions similar to WordPress’s multiple image sizes, we support Adaptive Resize functionality (see: Still manually generating smaller images for different resolution devices? WebP Cloud Services has launched the Adaptive Resize feature), allowing different-sized images for different visitors without occupying server storage.

In conclusion, ensuring the best visitor experience in today’s environment of multiple image formats is not only a technical challenge but also a balance of creation efficiency and user experience. Whether it’s high-compression formats like HEIC or emerging, widely supported formats like WebP and AVIF, content creators need to choose and convert wisely.

WebP Cloud is designed to address this challenge by automatically converting image formats and intelligently selecting the supported format for browsers, improving image load performance and simplifying the creation process. If you want to efficiently handle different image formats and provide the best browsing experience for visitors, try using WebP Cloud!