srcset仅负责分辨率适配，不提供格式降级；格式降级必须用picture+source，src作为基础兼容兜底，且所有路径须真实存在。
srcset 本身不提供“降级逻辑”，浏览器按自身能力选择最匹配的源，没有 srcset 时 fallback 到 src 才是真正的降级机制。别指望它自动兜底到低分辨率图或 WebP → JPEG，那得靠你手动组织。
srcset + sizes 是响应式选图，不是格式降级工具
浏览器只看 srcset 里每个 URL 后面的宽度描述符（如 1x、2x、400w）和当前 sizes 计算出的显示宽度，再结合设备像素比（DPR），挑一个最接近的源。它完全不关心图片格式，也不会因为不支持 WebP 就跳去用 JPG。
常见错误现象：<img src="logo.jpg" srcset="logo.webp 1x, logo@2x.webp 2x" alt="HTML图片标签srcset怎么降级？标准代码一览" > —— Safari 13 以下、IE、老 Android WebView 直接忽略 srcset 里的 WebP，但也不会加载 src 的 JPG，而是留白或报 404（如果 src 也写 WebP）。
-
src必须是基础兼容格式（通常是 JPG/PNG） -
srcset中所有 URL 都应与src内容语义一致，仅分辨率/密度不同 - 想做 WebP/JPEG 格式切换？必须用
<picture></picture>+<source type="image/webp"></source>
标准写法：srcset 配合 sizes 实现宽度适配
这是现代响应式图片最常用、最稳妥的组合。关键在 sizes 告诉浏览器“这张图在不同视口下大概占多宽”，浏览器才能从 srcset 中选出最优源。
立即学习“前端免费学习笔记（深入）”；
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
600px"
alt="风景照">
说明：
-
480w等是“固有宽度”，单位是像素，不是 CSS px -
sizes是媒体条件 + 宽度值，浏览器按顺序匹配，取第一个满足的宽度作为“目标显示宽度” - 最终选哪个源，由“目标显示宽度 × 设备 DPR” 和
srcset中各源的w值比对决定 - 没写
sizes？浏览器默认按100vw算，容易选大图，浪费带宽
格式降级必须用 ，不能只靠 srcset
如果你要优先用 WebP，退化到 JPG，srcset 无能为力。必须用 <picture></picture> 结构，让浏览器按 type 支持度逐个尝试。
<picture> <source srcset="photo.webp 1x, photo@2x.webp 2x" type="image/webp"> <source srcset="photo.jpg 1x, photo@2x.jpg 2x" type="image/jpeg"> <img src="photo.jpg" alt="风景照"> </picture>
要点：
- 每个
<source></source>可单独配srcset和sizes，互不影响 - 浏览器从上到下检查
type，第一个支持的就加载；都不支持，才 fallback 到<img alt="HTML图片标签srcset怎么降级？标准代码一览" >的src -
<img alt="HTML图片标签srcset怎么降级？标准代码一览" >的src是强制 required 属性，不可省略，否则无图可显 - 注意：IE 12+ 才支持
<picture></picture>，旧版需 polyfill（如 picturefill）
最容易被忽略的一点：srcset 里的 URL 路径必须真实存在且可访问——它不会因 404 自动跳下一个，也不会回退到 src；而 <picture></picture> 的 <source></source> 之间才是真正的“格式级降级”。别把两件事混在一起设计。
