srcset本身不降级，只负责选图；真正决定fallback的是sizes+浏览器计算逻辑+src兜底能力。写错sizes或漏src会导致加载大图、白屏或退化单图。
srcset 本身不降级，它只选图；真正决定“ fallback 到哪张”的是 sizes + 浏览器计算逻辑 + 底层 src 的兜底能力。写错 sizes 或漏掉 src，就会加载大图、白屏、或直接退化成单图。
srcset 不生效的三个典型现象
你写了 srcset，但 Network 面板里始终只看到一张图被请求——不是浏览器坏了，而是匹配链断了。
- Chrome / Safari 加载的永远是最大尺寸图（比如 1920w），哪怕在手机上：大概率是没写
sizes，浏览器默认按100vw估算宽度 - 小屏下本该加载 320w 图，却加载了 768w：检查
sizes="(max-width: 768px) 100vw, 50vw"是否和实际 CSS 容器宽度一致；若容器被max-width: 600px限制，那(max-width: 768px)条件虽匹配，但浏览器算出的目标尺寸仍偏大 - 所有设备都只加载
src指定的图，srcset完全被忽略：确认是否在本地双击打开 HTML（file://协议下部分浏览器禁用srcset解析），必须用python3 -m http.server等本地服务测试
sizes 必须和 CSS 布局对齐，不能靠猜
sizes 不是“建议尺寸”，是浏览器预加载决策的输入参数。它告诉浏览器：“这张图在不同视口下会占多宽”，从而决定从 srcset 里挑哪张资源下载。
- 错误写法：
sizes="100vw"—— 缺少媒体条件，等价于没写；Safari 可能直接跳过整组 - 正确写法：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，其中每个宽度值必须对应真实 CSS 表现（比如width: 100%、flex: 0 0 50%、grid-column: span 2） - 验证方式：DevTools → Elements → 选中
img→ 查看 Computed 面板里的intrinsic size和used width，再比对 Network 里实际加载的图宽是否接近used width × devicePixelRatio
src 是强制兜底，不是可选项
IE11、旧版 Android WebView、甚至某些邮件客户端，完全不解析 srcset。它们只认 src —— 所以这个属性必须指向一个真实可用、无需协商、无查询参数的静态资源。
立即学习“前端免费学习笔记（深入）”；
-
src路径必须能直接在浏览器地址栏打开，返回 200 和正确图片；相对路径如./images/logo.jpg在嵌套路由（如/user/profile）下极易 404，推荐用根路径/static/logo.jpg - 不要把
src写成动态地址，例如logo.jpg?format=webp—— 后端挂掉、CDN 截断参数、或返回 406，都会导致整个降级链失效 - 如果连
src都 404，浏览器不会尝试srcset中的任何一项，只会显示破损图标或alt文本
为什么改了 srcset 还是加载错图？先查这三件事
最常被忽略的是“图本身尺寸”和“服务器响应头”，它们不在 HTML 里，但直接影响浏览器能否正确解码和渲染。
- 用命令行检查原始尺寸是否一致：
file photo.webp和file photo.jpg输出都应明确含类似800 x 450；若 JPEG 显示data或no dimensions，说明 EXIF 被清空，布局会跳变 - 用 curl 检查 Content-Type：
curl -I https://cdn.example.com/photo.webp必须返回Content-Type: image/webp；若为application/octet-stream或空，<source type="image/webp"></source>将静默失效 - 确保所有格式图构图一致、裁剪一致、无透明通道差异（WebP 透明 vs JPEG 白底），否则视觉上像“没降级”，其实是内容错位
