AVIF 图片不生效主因是 未正确包裹在 中且缺少 fallback；type="image/avif" 必须严格小写、作为 直接子元素，并按 AVIF→WebP→PNG/JPEG 顺序排列，配合服务端正确 MIME 配置。
为什么 <source></source> 的 type="image/avif" 不生效
浏览器不加载 AVIF 图片，大概率不是因为你写错了 type，而是 <source></source> 没被正确包裹在 <picture></picture> 里，或者没有配合 <img alt="HTML代码中source标签type等于image/avif" > 作为 fallback。单独写 <source type="image/avif" srcset="a.avif"></source> 是无效的 —— <source></source> 本身不渲染，它只给父级 <picture></picture> 提供候选资源。
-
<source></source>必须是<picture></picture>的直接子元素，且必须有<img alt="HTML代码中source标签type等于image/avif" >作为最后一个子元素（否则无 fallback，部分浏览器直接忽略整个<picture></picture>） -
type值必须严格匹配 MIME 类型，image/avif区分大小写，写成Image/avif或image/AVIF都会被忽略 - Chrome 85+、Firefox 93+、Safari 16.4+ 支持 AVIF，旧版本 Safari（如 16.3 及更早）即使声明了
type="image/avif"也会跳过该<source></source>
怎么写才让 AVIF 真正被选用
核心是顺序 + 类型声明 + fallback。浏览器按 <source></source> 出现顺序尝试，遇到第一个支持且可加载的就停。
- 把 AVIF 放最前面：
<source type="image/avif" srcset="logo.avif"></source> - 紧跟 WebP（兼容性更好）：
<source type="image/webp" srcset="logo.webp"></source> - 最后放 PNG/JPEG fallback：
<img src="logo.png" alt="logo"> - 如果只用
src不用srcset，确保文件存在且 HTTP 响应头返回正确的Content-Type: image/avif；否则即使type正确，浏览器也可能因 MIME 不匹配而拒绝解码
常见错误：用 <img alt="HTML代码中source标签type等于image/avif" > 直接设 type
<img alt="HTML代码中source标签type等于image/avif" > 标签根本没有 type 属性 —— 这是初学者常抄错的地方。你可能会看到类似这样的错误写法：
<img src="logo.avif" type="image/avif" alt="logo">
这完全无效。type 只属于 <source></source>，且仅在 <picture></picture> 上下文中起作用。浏览器会忽略 <img alt="HTML代码中source标签type等于image/avif" > 的 type，并尝试直接加载 src，但若服务器没配对 MIME 类型，就会报 Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 或静默降级为透明图。
立即学习“前端免费学习笔记（深入）”；
验证是否真用了 AVIF
别信文件名，要看实际加载的资源和解码行为：
- 打开 DevTools → Network 标签页，筛选
Img，点击对应请求，看Content-Type响应头是不是image/avif - 在 Elements 面板里右键
<img alt="HTML代码中source标签type等于image/avif" >→ “Reload frame” 后观察是否触发新请求（避免缓存干扰） - 用
document.querySelector('img').currentSrc查看最终解析出的 URL，确认指向的是.avif文件 - 注意：某些 CDN（如 Cloudflare）默认不支持 AVIF MIME 类型，需手动开启或配置自定义 MIME 映射
AVIF 的真正门槛不在写法，而在服务端配置和浏览器支持边界 —— 写对了 type，只是第一步。
