使用<picture>标签实现AVIF到GIF的Safari降级显示失效排查

你的需求是让Chrome等支持AVIF的浏览器加载AVIF格式图片，Safari等支持不完善的浏览器加载GIF，但当前Safari仍会请求AVIF并显示空白，核心原因及解决办法如下：

问题原因 #

1. Safari版本支持特性：Safari 16.4及以上版本已经原生支持AVIF，但如果你的AVIF图片编码存在兼容性问题，会导致浏览器请求后无法正常渲染，出现空白。
2. 无Safari排除逻辑：当前代码仅通过type属性做格式检测，没有针对Safari的特殊处理，导致支持AVIF的Safari版本会优先请求AVIF资源。

解决方案 #

方案一：修复AVIF图片兼容性 #

如果希望让支持AVIF的Safari正常显示AVIF图片，需要确保图片编码兼容Safari：

• 使用最新版的libavif工具重新编码图片
• 避免使用AVIF的部分高级压缩特性（如特定色域设置）
  重新编码后再测试Safari的显示效果。

方案二：强制Safari加载GIF（无论是否支持AVIF） #

修改picture标签，给AVIF的<source>添加媒体查询，让Safari直接跳过AVIF资源的请求：

<picture>
  <source type="image/avif" srcset="https://overpadel.nl/wp-content/uploads/browser-test1.avif" media="not all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)">
  <source type="image/gif" srcset="https://overpadel.nl/wp-content/uploads/browser-test1.gif">
  <img src="https://overpadel.nl/wp-content/uploads/browser-test1.gif" alt="">
</picture>

这里的媒体查询会匹配除Safari之外的WebKit内核浏览器（如Chrome、Edge），因此只有这些浏览器会加载AVIF资源，Safari会自动加载后续的GIF资源。

内容的提问来源于stack exchange，提问作者Rico