srcset 无法格式降级，因它仅按尺寸/密度选同格式图片，失败后只回退到单一 src；必须用 的 分层匹配格式，再在各格式内用 srcset 响应式选图。
srcset 本身不提供格式降级能力，只负责按宽度或像素密度选图；想让 WebP/AVIF 失败时退到 JPG，必须用 <picture></picture>，不能只靠 srcset。
为什么 srcset 单独写在 <img alt="HTML怎么给srcset添加降级逻辑？小白速成教程" > 里无法降格式
srcset 是“同一格式下的多尺寸候选”，浏览器只会从列表里挑一个 URL 加载，但不会因为 photo.webp 404 或不支持就自动换 photo.jpg——它连试都不试。失败后直接 fallback 到 src，而 src 又只能是一个地址。
-
srcset="a.webp 1x, a@2x.webp 2x"：全是 WebP，旧 Safari 打不开就空白 -
srcset="a.jpg 1x, a@2x.jpg 2x"：兼容好，但新浏览器没法用更省流量的 WebP - 想兼顾？必须把格式选择权交给
<source></source>，不是srcset
<picture></picture> + srcset 才是正确组合方式
把格式优先级和响应式逻辑拆开：每个 <source></source> 自己带 srcset（和可选 sizes），浏览器先按 type 匹配格式，再在该格式内按 srcset + sizes 选最合适的尺寸。
<source type="image/avif" srcset="a.avif 400w, a.avif 800w" sizes="(max-width: 600px) 100vw, 50vw"></source><source type="image/webp" srcset="a.webp 400w, a.webp 800w" sizes="(max-width: 600px) 100vw, 50vw"></source>-
<img src="a.jpg" alt="描述">：这个src必须真实可访问，且不能带srcset
注意：<img alt="HTML怎么给srcset添加降级逻辑？小白速成教程" > 里加 srcset 会破坏降级链，Chrome 可能直接忽略整个 <picture></picture>。
常见踩坑点：写了却没生效
你以为格式降级跑起来了，其实浏览器根本没加载你写的 WebP/AVIF —— 很可能卡在这几个硬性条件上：
立即学习“前端免费学习笔记（深入）”；
-
<source></source>没写type属性，Safari 直接跳过整条（不是报错，是静默忽略） -
type="image/avif"写成type="avif"或type="image/avif;charset=utf-8"，服务端返回的Content-Type必须完全一致 -
<img src="a.jpg" alt="HTML怎么给srcset添加降级逻辑？小白速成教程" >的路径是相对路径且 HTML 在子目录下，导致 404；必须用根路径或绝对 URL - 本地开发用
file://协议打开 HTML，Safari 和部分 Chrome 版本会拒绝加载 AVIF/WebP（CORS 策略限制）
验证是否真生效：别只看页面显示
页面看着有图 ≠ 降级逻辑起作用。要确认浏览器到底加载了哪个资源：
- DevTools → Network → 勾选 Disable cache 和 Large rows
- 切设备模拟器（iPhone 12、Mac Retina），观察请求 URL 后缀是否随 DPR 变化
- 手动删掉某个
<source></source>的srcset地址，看是否退到下一条；再删<img alt="HTML怎么给srcset添加降级逻辑？小白速成教程" >的src，看是否只剩 alt 文字
真正难搞的是服务端 MIME 类型配置和本地协议限制，这两项不解决，前端代码写得再对也白搭。
