拥抱新编码：WebP、AVIF和其他

前言

前段时间将博客的图片从GitHub迁移到了Cloudflare R2，GitHub仅用作备份。光是配置CDN缓存并不够，毕竟图片的体积是实打实的在那里的。就算有缓存，你要加载的流量也没变——除非减小图片的大小。看了一圈，最终选择了WebP Cloud Service作为图片的前置代理，自动转换格式并加上水印。

看了一下效果，体积变化明显：同一张图，png下占用122KB，转换成AVIF后仅用了45KB，体积缩小了整整63%！

显然，JPEG和PNG很常用，但它们在流量敏感的使用场合时效果并不好。JPEG的体积可能较小，但不支持透明度这一点就已经很致命了；PNG的视觉效果极佳，因为其色深高达16位，且支持透明度与APNG，但作为无损压缩格式，它的体积又较大。所幸的是，图片的编码格式也在与时俱进，更符合现代标准的文件格式也应运而生。

对于常见的新编码，有以下几个：

• AVIF，由开源媒体协会发布，支持有损与无损压缩和透明度，兼容多种浏览器
• WebP，由Google发布，支持有损与无损压缩和透明度，以及Animated WebP（类似APNG），兼容所有的主流浏览器
• HEIC，由苹果公司发布，闭源，支持苹果和较多的安卓设备，兼容性较差

下面的图列举了常见的新型图片编码格式以及性能对比，感谢@PassionPenguin的翻译。

AVIF：新一代的图像压缩格式

AVIF (AV1 Image File Format)是一种由AOM（ Alliance for Open Media）开发的基于AV1编解码器的网络图像格式，这是一种开源免版税的图像格式。AVIF支持全分辨率的10位和12位色彩以及HDR。考虑到现在越来越多的手机与电脑显示器支持HDR，支持HDR格式的图片自然会有更好的视觉体验。

AVIF的兼容性还蛮不错。目前的主流桌面端与移动端浏览器都能很好的显示AVIF格式图片。至于Firefox，需要你开启image.avif.enabled才能正常显示。

此外，AVIF还支持

目前测试了一下主流软件兼容性，PC端的QQNT可以识别为图片文件并发送，但是会提示“发送失败”，消息框内正常显示（毕竟是基于Electron的，就一个小浏览器）；微信则直接不识别为图片。只能说AVIF还是适用于网页内容传递吧。

WebP：适用于网络的现代图片格式

WebP是一种现代图片格式，可为网络上的图片提供出色的无损和有损压缩。有损压缩的程度是可调整的，在文件大小和图片质量之间权衡取舍。WebP通常与JPEG和JPEG 2000相比，压缩率平均高出 30%，且不会丢失图片质量。

和PNG以及AVIF相似，WebP也支持动态图片。如下图所示，使用WebP的动态图像比原本的GIF体积小了40%。

原图片链接：parabox_gif_cover_2024-7-27_1525_0q2hs97dbt.gif (721×649)

同样是兼容性，PC端的QQNT可以正常接受和发送，且另存为的文件也是WebP，格式不变化；手机端的QQ与PC端保持一致。对于微信，PC端无法将WebP识别为图片，但手机可以，且手机发送完之后电脑也能查看。不过在另存为的时候出了问题：不论是电脑端还是手机端，另存之后格式都变成了JPG。猜测是手机端在发送时自动将WebP转换为了JPG。

HEIC：苹果自己鼓捣出来的玩意儿

我似乎一直对苹果颇有微词（笑）

这玩意比JPG的压缩比高，且支持HDR和10Bit色深。然而，HEIC是闭源的。光是这一点就足够被我们社团前社长抛弃了。 除了苹果的实况照片用这个，我实在想不到别的应用场景。虽然安卓的相机里也可以开启“以HEIC格式保存”，但实在没必要拿可怜的兼容性换空间，毕竟现在手机的存储空间也不值钱，还有云空间等“扩容”办法。此外，有那么多效果更好、兼容性更强的文件格式，为什么不用呢？期待Google推出一个WebP+VP9的动态相片方案爆杀苹果。

题外话

苹果那个实况照片还不是纯的HEIC（虽然HEIC原生也支持动画）。

根据从编解码角度看，iPhone拍摄的Live Photos实况照片究竟是什么？- 知乎一文，“iPhone拍摄的live photo照片，其实是一张后缀名为HEIC实际是JPEG的图片，加上一段使用H265编码和MOV封装的SDR视频的组合。实况照片它不是一张像GIF和WebP动图那样的照片，但在显示效果上和动图差不多。”

这玩意的兼容性更差：绝大部分手机APP都不支持显示HEIC，以至于在发送时小米相册可以自动将其转换为jpg；PC端的兼容性也很差，Windows原生支持WebP，AVIF也可以拖到Edge浏览器里打开，但是对HEIC则需要在微软应用商店额外下载扩展才行。