浏览器按顺序匹配，遇第一个满足条件的即停止；是唯一兜底出口，必须存在且含alt，src需可用；type须与服务器Content-Type严格匹配。
picture标签不生效时，浏览器到底在用哪个源
浏览器按 <source></source> 顺序匹配，遇到第一个满足条件的就停止，后续不管是否更优都不会加载。这意味着 media 写错、type 不匹配 MIME 类型、或 srcset 语法有空格/换行，都会导致跳过该 <source></source>，直接 fallback 到 <img alt="如何在HTML里写picture的降级" >。
常见错误包括：media="(min-width: 768px" 缺右括号、type="image/webp" 但服务器没返回 Content-Type: image/webp、srcset 里用中文逗号分隔。这些都不会报错，但静默失效。
img 标签必须写在 picture 内部且不能省略 alt
<picture></picture> 的降级机制完全依赖内部的 <img alt="如何在HTML里写picture的降级" >：它不是可选的备胎，而是唯一兜底出口。如果漏写 <img alt="如何在HTML里写picture的降级" >，或者写了但没加 alt 属性（哪怕为空 alt=""），部分浏览器（如旧版 Safari）会渲染空白框，甚至触发无障碍校验失败。
必须确保：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="如何在HTML里写picture的降级" >是<picture></picture>的最后一个子元素 -
src属性存在且指向一个可用的 PNG/JPG 资源（不能是空字符串或 404） -
alt显式声明，哪怕只是alt="描述文字"
WebP 和 AVIF 图片的 type 声明要严格对应响应头
只写 type="image/webp" 不够，服务器返回的 Content-Type 必须精确匹配。比如 Nginx 默认不识别 .avif，会返回 text/plain，这时即使浏览器支持 AVIF，也会跳过该 <source></source>。
验证方法很简单：打开 DevTools → Network → 点击图片请求 → 查看 Response Headers 中的 Content-Type。不一致就立刻修复服务器配置，而不是改 HTML。
示例正确写法：
<picture> <source srcset="photo.avif" type="image/avif"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="风景照"> </picture>
响应式 srcset + sizes 配合 media 时，优先级容易混乱
当同时用 media 和 sizes，浏览器先按 media 筛选可用 <source></source>，再在筛选出的 source 里根据 sizes 和视口宽度选 srcset 中最合适的尺寸。但如果多个 <source></source> 的 media 条件重叠（比如都写了 (min-width: 480px)），就会按 HTML 顺序取第一个，后面同条件的直接忽略。
建议做法：
- 用互斥的
media（如(max-width: 479px)/(min-width: 480px) and (max-width: 1023px)） - 把最宽屏、最高清的放在前面，兼顾新老浏览器兼容性
- 避免在同一个
<picture></picture>里混用type和media多层逻辑，复杂场景拆成多个独立<picture></picture>
降级不是“多写几个 source 就稳了”，而是每条路径都要能独立走通。最容易被忽略的是服务器响应头和 <img alt="如何在HTML里写picture的降级" > 的 src 可用性——这两点一错，整个 picture 就退化成一个带空 alt 的 img 标签。
