WordPress 6.7 终于支持 HEIC 图片了？谈谈 WebP Cloud 对于 HEIC 的支持

在 https://caniuse.com/?search=HEIC 的也面上对于 HEIC 图片是这样介绍的：

基于 HEVC 视频格式的现代图像格式。HEIC 通常比 WebP、JPEG、PNG 和 GIF 具有更好的压缩效果。由于 HEIC 复杂且许可费用昂贵，浏览器很难支持这种格式。AVIF 和 JPEG XL 提供免费许可，并设计用于取代 HEIC。

其中 「HEIC 复杂且许可费用昂贵」部分引用的链接为： https://en.wikipedia.org/wiki/High_Efficiency_Video_Coding#Patent_licensing

从 iOS 11 开始，iPhone 拍摄的照片会默认以 HEIC 格式存储，除非手动指定：

考虑到 iPhone 的市场份额，市面上会有大量的图片/视频被以 HEIF/HEVC 格式存储，也带来了大量的 HEIF/HEVC -> JPG/MOV/MP4 的需求，大量的人在网上搜索 「为什么我拍摄的照片无法在 Windows 电脑上打开」「如何将 HEIC 转换成 JPG」。

这一点对于内容发布者而言也是如此，我们来看看目前有哪些浏览器支持了 HEIC 格式的图片：

如果直接将 HEIC 发布到博客上，那就只有用 Safari 浏览器的用户可以打开了，其余用户根本看不到图，所以为了让其他浏览器看到图片，内容创作者得在每次发布之前手动将图片转换成大家都能接受的 JPG 格式，毕竟 JPG 格式在目前的 2024 年可是各个设备都支持了，但是这样又会有几个问题：

1. 转换成 JPG 格式比较费事，每次都需要手动转换，而且本地会有两个图片，一个是拍摄的 HEIC 格式图片，一个是转换之后的 JPG 格式
2. JPG 格式相对现代浏览器支持的格式来说相对老旧，HEIC 格式的有点在于有很高的压缩效率（用人话说就是图片很小），换成 JPG 之后虽然浏览器都是能支持了，但是图片体积又变大了，那怎么办，再手动压缩成 WebP？

WordPress 是怎么做的

WordPress 作为一个占有全球 42% 网站比例的 CMS，最近发布了 6.7 更新，在这个更新中表示支持了 HEIC 格式：

在 https://github.com/WordPress/wordpress-develop/commit/471a619 这个 commit 的注释中我们看到：

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.

WordPress 这里的做法是在媒体库中支持了 HEIF 图片的上传，并且在后台转换成了 JPG 格式并输出（如果你的服务器安装了支持 HEIC 的 Imagick，如果你是用官方镜像 wordpress 部署的话是带有的），例如，我们的 WordPress 演示站： https://wordpress.webp.se/fk7-running-shanghai-tianma/ 中上传了一张 HEIF 照片，路径如下：

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

在上传到了 WordPress 之后，WordPress 自动将图片替换成了：

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

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

通过观察 WordPress 的存储目录我们也可以看到 WordPress 在后台帮我们将 sample3.heic 转换成了尺寸的 JPG 图片。

-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

WordPress 的这个更新节省了上文中提到的「转换成 JPG 格式比较费事，每次都需要手动转换，而且本地会有两个图片，一个是拍摄的 HEIC 格式图片，一个是转换之后的 JPG 格式」问题，属于是图片终于能看了，但是依然不够理想。

稍微现代一些的图片格式

作为 WebP Cloud 和 WebP Server Go 的开发者，我们经常在各个图片格式中穿梭，目前我们观察下来比较主流的图片格式有：JPG，PNG，AVIF，WEBP，HEIC，JXL。 JPG 和 PNG 自然不用说，我们来分别看看后面几个图片格式的浏览器支持情况：

AVIF

JPEG XL

WebP

可以看到 WebP 几乎是全民支持，AVIF 可以获得更好的压缩率，但是浏览器支持情况就没有 WebP 那么好，JPEG XL 是 AVIF 的竞争对手，提供比 AVIF 更多的 Feature 比 AVIF 有更好一些的压缩效率，但是浏览器支持情况和 HEIC 无异。

这么多格式的图片，我们应该如何选择来获得最佳的访客体验呢？

WebP Cloud 的做法如下：

1. 将原始图片（我们支持 JPG，PNG，AVIF，WEBP，HEIC, NEF 作为原图）转码并压缩成不同的图片格式，例如一个原始 PNG 图片会被同时处理成 WebP 和 AVIF 格式。
2. 在访客访问的时候我们根据访客浏览器的 Accept 头和 User-Agent 头去查询这个浏览器支持的图片格式列表
3. 在 WebP Cloud 本地缓存中找到浏览器支持的图片格式中体积最小的一个输出给访客（并且继续使用原图的 URL），这里体积最小是因为有的时候可能 WebP 图片体积比 AVIF 还小，此时应该输出 WebP 图片

注意 WebP Cloud 和 WebP Server Go 都是支持 HEIF 作为输入图片的（甚至我们和 imgproxy 是市场上唯二支持的？），我们观测了几个类似的产品，整理表格如下：

例如，在我们的 WordPress 演示站开启了 WebP Cloud 之后，HEIC 图片可以直接在不改变文件后缀的情况下直接输出（甚至还能带上我们的水印）：

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

此外，为了做到和 WordPress 生成多个不同尺寸的图片以适应不同分辨率浏览器的情况类似，我们也支持 Adaptive Resize 功能（详见： 「还在为了不同分辨率的设备手动生成小图？WebP Cloud Services 上线 Adaptive Resize 功能」，在不占用自己服务器存储的情况下直接为不同的访客输出不同尺寸的图片。

综上，在当今多种图片格式共存的环境中，确保最佳的访客体验不仅是技术上的挑战，更是创作效率和用户感受的平衡。无论是 HEIC 等高压缩效率的格式，还是 WebP、AVIF 等新兴且广泛支持的格式，内容创作者都需要智慧地选择和转换。

WebP Cloud 正是为了解决这一挑战而生，通过自动转换图片格式，并智能选择浏览器支持的格式进行输出，不仅提升了图片加载性能，还极大地简化了创作流程。如果希望高效地处理不同格式的图片，并为访客提供最佳的浏览体验，欢迎来尝试使用 WebP Cloud！