目前很多网站采用webp+其他格式兼容的方案。webp作为当下非常流行的在线网站的浏览格式非常不错。但是AVIF的出现我觉得可以打破一些webp擅长的领域，例如图像压缩。并且还支持一些webp不支持的特性，例如HDR。

我特别喜欢HDR，这也是我使用Apple设备的重要原因之一。可以chrome并不支持HEIC图像格式的HDR直接显示，甚至在Safari中都看不到HDR效果，只能在照片app中看到HDR效果。

avif是少数支持在chrome浏览器中显示HDR效果的图像。

AVIFHDR：

你能看到上面这个支持HDR的横条吗，第一个原点已经达到了1000nit亮度了。

macos14的Safari用户可以看这个MP4的HDR：

MP4HDR：

另外展示几个其他格式用于检测HDR兼容性：

JPGHDR：

PNGHDR：

HEICHDR：（提示仅向中国大陆提供服务说明你的浏览器不支持heic图片的直接展示）

在支持HDR的设备和浏览器上你可以清晰看到横条各个亮点之间的亮度变化。在不支持的设备中似乎什么都看不到。

avif格式兼容性：

兼容性情况

HDR：

因为Safari不支持HDR，所以iPhone只能用MP4来看。

在支持HDR的windows11和macos14的chromium内核浏览器机器才会显示HDR。

将HEIC照片转换为AVIF等HDR内容

GPT回答是用ffmpeg或者ImageMagick来进行转换。经过实测这两种都不行。ffmpeg的方法会将图像丢失掉颜色信息。ImageMagick不保留HEIC的HDR信息，只能输出一个AVIF的SDR图像。

目前我知道编辑HDR照片比较好的应用就是Pixelmator

在Pixelmator Pro中打开HDR图像载入。

载入HDR

我们就可以看到图片上有一个HDR标志。代表你的图像是HDR图像。

HDR图像

格式我们可以选择HDR AVIF

导出格式

然后我们就能实现HDR的照片展示效果啦！

有其他方法的小伙伴欢迎告知，我很想找平替。或者转换成hdr的jpg也可以。

另外也支持导出jpg，但是hdrjpg的图像相同质量体积大了好多倍。

预览

放几张我拍的几张照片吧，终于有办法让别人看到我用iPhone拍摄的HDR照片的HDR效果啦！

mp4 HDR（原1MB但是我手动压缩到100kb）,mp4HDR支持macos14的Safari。

avif HDR效果（400kb）：

jpg HDR效果（1.9MB）：

这么比较起来感觉jpg亮度可能更高？不过体积是真的大。

下面图像就用avif了，不给杜老师图床上压力了。

总结

avif相比jpg体积小非常多，加载也更快，HDR效果avif可以直接显示出来，而jpg就需要加载完sdr，过一会再给你展示HDR效果，需要加载一下。

hdr图片目前转换起来比较费劲，只有极少的软件和方法才能支持。目前适配情况只有极少设备才能查看。（支持hdr的macbook macos14和win11电脑）

补充：极少数安卓手机也支持，需要安卓14版本。比如比较新的oppo机型。