低版本浏览器（IE8–IE11、旧版 Android WebView、Safari <16）不支持<picture>和AVIF/WebP，需降级为纯<img>标签并提前加载WebP作为兼容方案；Safari 16+才原生支持AVIF。
直接结论：低版本浏览器（IE8–IE11、旧版 Android WebView、Safari <picture>、srcset、sizes 或 AVIF/WebP 格式，必须用降级组合：<img src="fallback.jpg"> + <meta name="viewport"> + 语义标签兜底 CSS + 条件加载 polyfill。
IE8–IE11 中 <picture> 完全不解析，只渲染内部 <img>
IE8–IE11 把 <picture> 当作未知标签，直接忽略整个标签块，但会照常渲染其内部的 <img>。这是唯一能靠得住的兜底机制——前提是 <img> 的 src 必须是可直连的 JPEG/PNG 地址，不能带查询参数（如 photo.jpg?format=webp），否则 IE 会请求失败或显示空白。
-
<img>必须有src和alt，缺一不可；srcset、sizes属性对 IE 完全无效，写了也白写 - 不要在
<picture>外再包一层<div>做“备用图”逻辑，IE 会跳过整个结构，反而导致无图可显 - 验证方式：在 IE11 开发者工具中查看 Elements 面板，确认是否只剩
<img>节点，且 Network 面板中只发出一个 JPEG 请求
Android 4.4 WebView 及更早版本会因 <picture> 解析失败而空白
旧版 Android WebView（尤其是 4.4.x）对 <picture> 支持极差：部分版本会静默崩溃标签树，导致图片区域完全空白，连 <img> 都不渲染。这不是 bug，是引擎根本不认识该标签。
- 必须确保
<img>是独立可访问的资源：路径要绝对或相对稳定，服务器返回Content-Type: image/jpeg，不能是text/plain或 404 - 避免使用 CDN 动态转码 URL（如
xxx.jpg?x-oss-process=image/format,avif），这类地址在不支持格式的浏览器中常返回 406 或损坏二进制流 - 若业务强依赖首屏图片，建议对 UA 做轻量检测（如
navigator.userAgent.indexOf('Android 4.4') > -1），降级为纯<img>结构并提前加载
WebP/AVIF 格式在 Safari
WebP 在 Safari 14+ 才开始支持，AVIF 更晚（Safari 16.4+、Chrome 85+）。把 type="image/avif" 放在 <source> 第一位，对这些老浏览器毫无意义——它们连 MIME 类型都不识别，直接跳过整条 <source>，继续往下匹配。顺序正确 ≠ 兼容生效。
立即学习“前端免费学习笔记（深入）”；
-
<source type="image/avif">必须配合法支持的浏览器才起作用；对不支持者，它等同于不存在 - 服务器返回的图片实际
Content-Type必须与type属性严格一致（如image/webp），拼错或带分号（image/webp;）会导致静默跳过 - Safari 12.1 之前不支持
w描述符，即使你写了srcset="a-400w.jpg 400w"，它也会退化为只加载<img src>—— 这时只能靠<picture>+2x回退保底
viewport 缺失或错误会导致所有响应式图片计算失效
如果 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没写、写错位置（比如在 <body> 里）、或被服务器注入 BOM 字节污染，那么 IE 和旧 WebView 会以桌面宽度（980px）解析页面，sizes 计算全部错乱，srcset 选图逻辑彻底失效。
- 该
<meta>必须顶格、无空格、无注释、无 BOM，且位于<head>最开头 - 检查方式：Chrome DevTools → 切换设备模式 → 右键“查看网页源代码”，确认该标签在第一行
<head>内 - 漏掉这行，
<picture>和srcset就像给没装 GPS 的车配导航地图——语法再准也没用
最容易被忽略的是：所有格式图片（AVIF/WebP/JPEG）必须尺寸一致、构图一致。否则用户从桌面切到手机时，同一张图可能突然裁剪偏移或拉伸变形——这不是兼容性问题，是设计层面的硬伤，任何 polyfill 都救不了。
