老旧浏览器不支持<picture>、srcset或sizes，但会安静忽略新标签/属性，仅加载<img src="...">中的兜底图；关键要求是<img>必须有真实src且格式通用（如JPEG/PNG），<source>需按AVIF→WebP→JPEG/PNG顺序排列，且所有图片须尺寸与视觉一致。
直接结论：老旧浏览器（IE、Android 4.4 WebView、Safari 9 及更早）不支持 <picture>、srcset 或 sizes，但只要结构写对，它们会安静地忽略新标签/属性，只加载 <img src="..."> 中的兜底图——这是唯一零 JS、不发多余请求、SEO 友好的降级路径。
为什么 <picture> 在 IE 里“看起来没生效”却其实没坏
IE6–IE11 完全不解析 <picture> 标签，整个标签块被跳过，只渲染内部的 <img>。这不是 bug，是规范行为。关键在于：<img> 必须带真实有效的 src（不能是空值、data-src 或带参数的动态地址），且该图片必须是所有浏览器都能解码的格式（如 JPEG/PNG）。
- 错误写法：
<img alt="...">→ IE 加载空白 - 正确写法：
<img src="hero.jpg" alt="...">→ IE 显示正常，现代浏览器自动跳过它 - 别给这个
<img>加srcset或sizes：IE 不识别，反而可能干扰解析
<source> 的顺序和 type 值决定是否真能 fallback 到 WebP/AVIF
浏览器从上到下匹配 <source>，遇到第一个 type 支持且 media 满足的就停。如果顺序错，现代浏览器也加载不到高级格式。
- 必须把最先进格式放最前：
<source srcset="a.avif" type="image/avif"> - 次之 WebP：
<source srcset="a.webp" type="image/webp"> - 最后 JPEG/PNG 回退只能放在
<img>的src里，不能写成第三个<source> - 避免混用
media和type：Safari 9 和旧 Android WebView 容易整块<picture>失效
Android 4.4 WebView 和 Safari 9 的特殊坑
这两个环境部分支持 <picture>，但 srcset 的 w 描述符常被当字符串处理，导致加载错图或留白。纯 HTML 降级不可靠，需轻量 JS 干预。
立即学习“前端免费学习笔记（深入）”；
- 检测方式：
'srcset' in document.createElement('img')，比 UA 判断更准 - 降级策略：保留
<img data-srcset="...">，JS 检测通过后再把值赋给srcset - 不推荐引入 full polyfill（如 picturefill）：体积大、执行时机难控、可能与懒加载冲突
- 所有格式图片必须尺寸一致、构图一致：否则切换时视觉跳变，用户感知明显
<img> 上的 fetchpriority 和 loading 要加在哪
这些提示属性只在 <img> 标签上有效，<source> 上加了也白加。尤其 fetchpriority="high" 必须写在 <img> 上，否则首屏大图无法抢占加载优先级。
- 正确：
<img src="fallback.jpg" fetchpriority="high" loading="lazy" alt="..."> - 错误：
<source srcset="a.avif" fetchpriority="high">→ 属性被忽略 -
loading="lazy"在 IE 中被忽略，无害；但在 Safari 12.1+ 之前不支持，可接受
最容易被忽略的不是语法，而是所有回退图片的视觉一致性——尺寸、裁剪、色彩风格必须统一，否则用户从 AVIF 切到 JPEG 时会明显感觉到“画面缩了一下”或“颜色发灰”。这没法靠代码修复，得进设计协作环节。
