是唯一零js、不发额外请求、seo友好、原生支持的响应式图片方案；其须按格式支持强度降序排列（如avif→webp→jpeg），浏览器匹配首个满足type与media条件的资源并停止，仅作兜底且必须含src与alt。
直接用 <picture></picture>，别绕弯子——这是唯一零 JS、不发额外请求、SEO 友好、原生支持的方案。
为什么 <source></source> 顺序不能乱
浏览器从上到下逐个尝试 <source></source>，遇到第一个 type 支持且媒体条件满足的就加载并停止。如果把 image/jpeg 写在最前，哪怕后面有 image/avif，AVIF-capable 浏览器也永远不会加载它。
-
image/avif必须放第一个：<source srcset="a.avif" type="image/avif"></source> -
image/webp次之：<source srcset="a.webp" type="image/webp"></source> - JPEG/PNG 回退必须放在
<img>的src属性里，不能写成第三个<source></source> - 所有
srcset值里的图片分辨率、质量档位、裁剪比例要一致，否则响应式切换时会出现拉伸或模糊
<img> 单标签能否支持 WebP/AVIF 自动降级
不能。单 <img src="x.jpg"> 只能加载一个 URL，浏览器不会主动替换格式。即使你用 CDN 动态转码（如 xxx.jpg?x-oss-process=image/format,avif），不支持 AVIF 的浏览器仍会收到 406 或损坏数据，导致图片不显示。
-
<img>适合背景图（background-image: url(x.webp)）、图标、头像等无需艺术方向控制的静态资源 - WebP 在 Chrome/Firefox/Safari 14+/Edge 全支持，足够稳；AVIF 则建议只用于首屏大图，且必须搭配
<picture></picture> - 纯 CSS 背景图无法做格式回退，
background-image不识别type或srcset
IE 和旧 Android WebView 怎么兜底
<picture></picture> 在 IE 中完全不被识别，会忽略整个标签，只渲染内部的 <img>——这反而是优势：只要 <img src="x.jpg"> 存在，IE 就能显示 JPEG。但旧版 Android WebView（<picture></picture> 出错，导致空白。
- 不要给
<img>加srcset或sizes，它只负责兜底，不是响应式主力 - 确保
<img>的src是可直接访问的 JPEG 或 PNG，不能是带查询参数的动态地址（如?format=webp） - 避免在
<picture></picture>外再包一层<div> 做 fallback <p>最容易被忽略的是：所有格式的图片必须尺寸一致、构图一致，否则视觉跳变；<code>fetchpriority="high"要加在<img>上，不是<source></source>——否则无效。
