type="image/avif"仅判断格式支持，不感知网络带宽；浏览器按MIME类型匹配且顺序优先，不读取effectiveType或saveData；动态带宽切换必须依赖JS检测并重写source.srcset。
直接结论：type="image/avif" 本身不触发“动态带宽切换”，它只做格式支持判断；浏览器是否加载 AVIF，取决于是否支持该 MIME 类型，而不是当前网络是 4G 还是 2G。
为什么 type="image/avif" 不等于“按网速选图”
浏览器解析 <source> 时，对 type 属性的处理逻辑非常简单：查 Accept 请求头里有没有 image/avif，有且本机解码器支持 → 就用这个源；否则跳过，继续看下一个 <source>。它完全不读取 navigator.connection.effectiveType 或 saveData 等网络状态 API。
这意味着：
- 即使用户开着“省流量模式”，只要 Chrome 版本 ≥ 85 且没禁用 AVIF 解码，
type="image/avif"的源仍会被选中 - 即使用户在 2G 网络下，只要支持 AVIF，浏览器照常请求 AVIF 文件——不会自动 fallback 到 WebP 或 JPG
-
media和type是并列匹配条件，不是嵌套关系；你不能写media="(prefers-reduced-data: reduce)"来控制 AVIF 加载（该媒体特性尚未被主流浏览器支持）
想真正实现“带宽感知切换”，得靠 JS + picture 协同
纯 HTML 无法完成这事，必须用 JS 检测网络状态，并动态改写 <picture> 内部的 srcset 或插入/移除 <source>。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 用
navigator.connection.effectiveType获取粗略带宽类型（"slow-2g"、"2g"、"3g"、"4g"），但注意 Safari 不支持该属性 - 用
navigator.connection.saveData判断是否开启省流量模式（Chrome/Firefox 支持，Safari 无视） - 不要直接操作
src，而是替换整个<source>元素或其srcset属性，避免触发重复加载 - 务必在 DOM ready 后执行，且考虑服务端渲染（SSR）场景下 JS 运行时机
示例逻辑片段：
<picture id="dynamic-pic">
<source data-avif="photo.avif" data-webp="photo.webp" data-jpg="photo.jpg">
<img src="photo.jpg" alt="...">
</picture>
<script>
const pic = document.getElementById('dynamic-pic');
const source = pic.querySelector('source');
if ('connection' in navigator && navigator.connection) {
const { effectiveType, saveData } = navigator.connection;
let srcset;
if (saveData || effectiveType === 'slow-2g' || effectiveType === '2g') {
srcset = source.dataset.jpg;
} else if (effectiveType === '3g') {
srcset = source.dataset.webp;
} else {
srcset = source.dataset.avif;
}
source.srcset = srcset;
}
</script>
type="image/avif" 的实际兼容性坑点
AVIF 支持远不如 WebP 成熟，几个容易忽略的细节：
- Safari 直到 macOS Sonoma / iOS 17 才开始默认启用 AVIF，且仅限
type="image/avif"+srcset场景，<img src="x.avif">仍可能失败 - 部分安卓 WebView（如微信内置）声称支持 AVIF，但实际解码崩溃或颜色异常，需加 UA 黑名单兜底
- CDN 或图片服务若未正确配置
Content-Type: image/avif响应头，即使type写对了，浏览器也会因 MIME 不匹配而跳过该<source> - AVIF 文件若含 ICC v4 色彩配置文件，在旧版 Chrome（≤115）中可能被静默降级为 JPG，无任何控制台报错
最麻烦的其实是服务端配合：当浏览器发来 Accept: image/avif,image/webp,*/*，后端必须能按需生成并返回对应格式，而不是只返回预存的 AVIF 文件——否则遇到不支持设备就彻底挂了。
