是唯一可靠实现图片格式降级的机制，需用 声明标准 MIME 类型（如 image/webp），顺序决定优先级， 为强制兜底且 src 必须是可直访的 JPEG/PNG 路径，alt 不可省，所有格式须尺寸一致。
<picture></picture> 是唯一能可靠实现图片格式降级的 HTML 机制，<img src="x.webp" alt="如何通过HTML设置图片降级备用文件" > 在 Safari ≤13.1、IE、旧版 Android WebView 中会静默留白——浏览器根本不识别 image/webp MIME 类型，连加载请求都不会发。
必须用 <source type></source> 声明标准 MIME 类型
浏览器只靠 type 属性决定“要不要看这个 source”，不嗅探文件后缀，也不猜内容。写错就跳过：
- ✅
type="image/webp"、type="image/avif"、type="image/jpeg"（注意是jpeg，不是jpg） - ❌
type="webp"、type="image/jpg"、type="image.webp" - 服务器返回的
Content-Type必须和type完全一致，否则 Safari 会静默忽略，Chrome 可能侥幸加载但不可靠
<source></source> 顺序是优先级队列，不是备选列表
浏览器从上到下逐条检查，遇到第一个 type 支持且资源可解码（URL 可访问、格式合法、网络通）的就停，不再往下看：
- 把
<source srcset="logo.avif" type="image/avif"></source>放最前：覆盖 Chrome 120+、Firefox 120+、Edge 120+ - 接着
<source srcset="logo.webp" type="image/webp"></source>：覆盖 iOS 14+ Safari、Android 4.0+、绝大多数桌面浏览器 - 最后
<source srcset="logo.jpg" type="image/jpeg"></source>或直接省略，把 JPEG 放进<img alt="如何通过HTML设置图片降级备用文件" >的src
<img alt="如何通过HTML设置图片降级备用文件" > 不是可选项，是强制兜底载体
<picture></picture> 自身不渲染、不请求，真正触发加载的是匹配成功的 <source></source> 或最终的 <img alt="如何通过HTML设置图片降级备用文件" >。漏掉它，整个结构就空白：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="如何通过HTML设置图片降级备用文件" >的src必须是静态、可直访的 JPEG/PNG 路径，比如/assets/logo.jpg，不能带查询参数（如?format=webp） - 该 URL 必须能在浏览器地址栏单独打开并显示正常图片；CDN 动态转码路径（如
?x-oss-process=...）不能用作<img alt="如何通过HTML设置图片降级备用文件" >的src -
alt属性不可省，否则无障碍和 SEO 失效 - 所有格式图片的宽高、构图、裁剪比例必须一致，否则切换时视觉跳变
最容易被忽略的是：即使写了三个 <source></source>，只要服务器没正确返回对应 Content-Type，或路径 404，浏览器就会跳过全部，最终只依赖 <img alt="如何通过HTML设置图片降级备用文件" > —— 所以它的 src 必须真实可用，不能只是“理论上存在”。
