不能只靠src降级，因为旧浏览器（如IE、Safari≤13.1）不识别image/webp MIME类型，遇到会静默丢弃而非尝试PNG/JPG；必须用显式声明格式，并以作强制兜底，且须为开放标签、无srcset、路径可直访。
为什么 <picture></picture> 不能只靠 src 降级？
浏览器加载图片时，<img src="a.webp" alt="如何使用HTML实现图片格式回退降级" > 遇到不支持 WebP 的旧浏览器（比如 IE、老版 Safari），会直接报 404 或空白——它不会自动尝试换 PNG 或 JPG。单纯改后缀没用，必须由 HTML 显式声明备选路径和格式条件。
<source></source> 的 type 属性必须精确匹配 MIME 类型
浏览器按 <source></source> 顺序检查 type，只加载第一个满足类型支持且媒体查询也通过的资源。写错类型会导致整组回退失效：
-
type="image/webp"✅ 正确（注意不是webp或.webp） -
type="image/jpg"❌ 错误，应为image/jpeg -
type="image/png"✅ 正确 - 未写
type的<source></source>会被忽略（除非是最后一个<img alt="如何使用HTML实现图片格式回退降级" >）
回退链必须以 <img alt="如何使用HTML实现图片格式回退降级" > 结尾，且不能带 srcset 或 sizes
<picture></picture> 的设计逻辑是：前面所有 <source></source> 都不匹配时，才兜底执行最后的 <img alt="如何使用HTML实现图片格式回退降级" >。这个 <img alt="如何使用HTML实现图片格式回退降级" > 是唯一真正渲染的元素，所以：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 它必须有
src（比如src="fallback.jpg"），且该地址要能被所有浏览器访问 - 它不能有
srcset或sizes—— 这些属性在<picture></picture>内部由<source></source>管理，加在<img alt="如何使用HTML实现图片格式回退降级" >上会被忽略 - 它的
alt、width、height等属性照常使用，不影响回退逻辑
<picture> <source type="image/webp" srcset="photo.webp"> <source type="image/avif" srcset="photo.avif"> <img src="photo.jpg" alt="描述文字"> </picture>
IE11 及更旧浏览器完全不识别 <picture></picture>，需额外处理
IE11 不解析 <picture></picture>，会跳过所有 <source></source>，但能渲染内部的 <img alt="如何使用HTML实现图片格式回退降级" >——这反而是好事。不过要注意：
立即学习“前端免费学习笔记（深入）”；
- 如果把
<img alt="如何使用HTML实现图片格式回退降级" >写成自闭合标签<img alt="如何使用HTML实现图片格式回退降级" >，IE 会丢掉整个节点，必须写成<img alt="如何使用HTML实现图片格式回退降级" >开放标签 - 某些构建工具（如旧版 webpack html-loader）可能自动转义
<picture></picture>，导致生产环境失效，需检查最终 HTML 源码 - 若需支持 IE9–10，只能放弃
<picture></picture>，改用 JS 检测 + 动态设置img.src，或服务端 UA 判断
type 的 MIME 拼写，以及忘了 <img alt="如何使用HTML实现图片格式回退降级" > 必须是开放标签。一旦回退失败，先查浏览器开发者工具的 Network 面板，看最终请求的是哪个 URL，再逆向核对 <source></source> 的 type 是否被识别。 
