如何在不支持AVIF的浏览器（如Edge）中显示AVIF图片？含双图适配方案

一、让Edge支持AVIF图片 #

新版Microsoft Edge（91及以上版本）已原生支持AVIF格式，直接把Edge升级到最新版就能正常显示AVIF图片。如果没法升级旧版本，就用下面的兜底方案。

二、让浏览器自动选择加载AVIF或PNG #

用HTML的<picture>标签就能实现需求，它允许你提供多种格式的图片资源，浏览器会自动加载它支持的最优格式，不支持的话就用兜底的PNG。

把你原来的代码改成这样：

<a href="./">
  <picture>
    <!-- 优先加载AVIF格式 -->
    <source srcset="img/logo.avif" type="image/avif">
    <!-- 不支持AVIF时加载PNG -->
    <img src="img/logo.png" alt="Logo – Test">
  </picture>
</a>

代码说明： #

• <source>标签：指定AVIF格式的图片路径，type="image/avif"告诉浏览器这是AVIF类型资源，支持AVIF的浏览器会优先加载它。
• <img>标签：作为兜底项，当浏览器不支持AVIF时，会自动加载这里的PNG图片，同时保留alt属性保证页面可访问性。

这样不管是支持AVIF的新版Edge，还是不支持的旧浏览器，都能正常显示图片，还能让支持的浏览器加载体积更小的AVIF文件，提升页面加载速度。

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