Webp现在已经成为了最主流的Web图片格式之一，经过十多年的发展已经建立了庞大的生态，很多博客网站都默认转码为Webp，包括Bilibili在内的很多平台也转向了Webp格式。Webp有很高的压缩率，作为博客文章插图的效果极好，但是因为我没钱买高速图床，所以在设定的例图板块这种需要同时加载多张图片的场景下仍然力不从心，我转而开始寻找一种更先进的图片压缩格式，AVIF格式就这样进入了我的视野。


那么为什么我现在依旧选择Webp作为主力图片格式呢？因为我发现，虽然AVIF作为一种新格式它的压缩率更高、新技术支持更广泛，但现在的兼容性依旧不适合作为主力图片格式，但为什么我不能先利用上它的一些新技术呢？于是我将目光投向了一项Webp不支持但能显著提高图片效果的技术——HDR。


HDR技术应该不需要多说，新手机都能拍 Ultra HDR 照片，但社交平台貌似不太喜欢。去年国内的社交平台开始大规模支持 Live Photo，但这是因为 Live Photo 的热度更高，带来的所谓“情绪价值”更高。不过 Live Photo 并不能提升图片本身的素质，像是静态的绘画作品就没有效果了（顺带说一下，我的博客动态目前也支持查看 Live Photo 了）。HDR是实实在在能提升图片素质的，但因为体积也变大了，为了那点流量费，目前就酷安支持了HDR图片显示。


经测试，AVIF的高压缩率可以做到在加入HDR的图层后只比普通Webp大一点，不考率兼容性的话完全可以投入生产环境了，如果你的设备支持HDR的话进入泽凌页面应该可以看到图片上方出现打卡HDR图片的提示。因为上个月开始，我将部分插画转成HDR放入设置中试验，效果其实还挺不错的。


下面是我进行的一些兼容性测试：


| 平台 | GPU | 系统 | 浏览器 | 兼容性 |
| --- | --- | --- | --- | --- |
| Xiaomi Book Pro 14 2022 | Intel® Iris® Xe Graphics (80EU) | Windows 11 25H2 | Edge 145 | 正常 |
| Xiaomi 14 | Adreno 750 | HyperOS 3 (Android 16) | Edge 144 | 正常 |
| Xiaomi Civi 5 Pro | Adreno 825 | HyperOS 3 (Android 16) | Edge 143 / Chrome 134 | 正常（P3色域检测未知） |
| Redmi Note 12 Turbo | Adreno 725 | HyperOS 3 (Android 15) | Firefox 149 | 不兼容（色域映射错误） |
| iPhone 16 Pro Max | A18 Pro | iOS 26 | Safari | 正常 |

---


下面说说如何简单的将普通的图片转成AVIF HDR


1. 在手机上安装Lightroom APP
2. 在Lightroom中打开你要转成HDR的图片
3. 打开“编辑”-“亮度”-“在 HDR 模式中编辑”
4. “HDR 限制”是实际HDR最高提亮程度，默认的+2.30就是提亮约5倍
5. 点击右上角“共享”-“导出为...”，文件类型选择“AVIF”，品质实测80%就够了，勾上“HDR 输出”
6. 点击右上角的“✔”，导出完成


注意事项：


- 尽量选择插图，不要有大面积白色或者纯白色背景的图片，不然真可以当闪光弹使
- 默认参数下SDR色域映射有非常大的色偏，生产环境中建议像我一样加个开关或者自动检测（我懒）
- 不要再一个页面上放过多HDR图片，AVIF图片解码本来就需要性能，过多的图片会导致页面非常卡顿

---

2026-02-07