AVIF测试
AVIF测试
技术分享|2023-4-28|最后更新: 2023-12-13
type
status
date
slug
summary
tags
category
icon
password

先看看你的设备是否支持HDR

使用桌面浏览器的朋友请先点击左侧日月按钮关闭暗黑模式
 
github源
  • 这是一个从 10000nit 到 400nit 的带15个圆点的渐变,其中最右侧的圆点应为1000nit
  • 如果你什么都没看见,说明图片不被识别(类型0),或整张图片被当作比白更白的内容“过曝”了(类型2)
  • 如果你看到最左边的圆点是和背景相同的白色(周围的渐变略有一点点灰),到最右边变更灰,那么表示此时你并没有看到HDR效果,HDR内容可能被当作SDR来处理了(类型1)
  • 如果你看到最左边是很刺眼的、比背景更白的白色,那么起码你有了HDR效果
  • 在有HDR的前提下,如果你看到渐变在中间处才开始向右逐渐变暗,那么说明你看到了约1000nit的峰值亮度,且超出的部分由于“顶不上去”而裁切(类型3)
  • 在有HDR的前提下,你能看到所有圆点和整个渐变,说明此时你的环境将超级亮的内容(超过了4000nit)映射到了能正常显示的范围内(类型4)
  • 在有HDR的前提下,你看到渐变消失的地方比较突然,那么可能此时的处理逻辑没有一个柔和的 rolloff,而是比较硬地切(Clip)掉了超过峰值亮度的区域(类型5)
  • 如果你:
      1. 缩放整个页面,改变了HDR内容的显示面积
      1. 停留时间变长
      1. 调整了设备的显示亮度,
      渐变消失的地方在左右移动,说明你的设备
      1. 正在动态调整峰值的亮度
      1. Apple 带 EDR 的设备可以通过调整屏幕亮度来改变 Headroom 而产生此变化
 

 
类型0:完全不支持avif格式,所以你什么也看不见,甚至会有 红叉/黑屏/问号 等标识
类型1:支持了avif格式,但不全面,但没能识别它的色彩空间信息,所以被统一作为SDR内容来处理了
类型2:支持了avif格式,也识别了其HDR的特性,但把它按“完全超过了屏幕显示能力”的方式进行了“裁切”处理,按理说 diffuse white 亮度以下的内容就可以看见
类型3:正确处理了HDR avif,但以“过曝”的方式处理了超过系统峰值亮度的内容,并带有适当的Roll-off
类型4:正确处理了HDR avif,但以整体映射的方式处理了超过系统峰值亮度的内容
类型5:正确处理了HDR avif,但以“过曝”的方式处理了超过系统峰值亮度的内容,并没有 Roll-off,直接硬裁切
 
 
 

AVIF HDR静帧

github源
截止 2023-12-13
OS
浏览器
HDR显示
SDR下变换
macOS
Chrome
Safari
部分支持
iOS
Chrome
Safari
Win 10
Edge
Win 11
Chrome

AVIFS+HDR

github源
OS
浏览器
HDR显示
SDR下变换
动画效果
macOS
Chrome
Safari
iOS
Chrome
Safari
Win 10
Edge
Win 11
Chrome

AVIFS+Alpha+HDR

github源
OS
浏览器
可见性
HDR显示
SDR下变换
动画效果
Alpha
macOS
Chrome
Safari
N/A
N/A
N/A
N/A
iOS
Chrome
N/A
N/A
N/A
N/A
Safari
N/A
N/A
N/A
N/A
Win 10
Edge
win 11
Chrome
 
挽救一下LogC4代理从暗视觉模拟到日拍夜