srcset本身不提供自动降级，仅指导浏览器择优加载候选图；真正兜底的是src属性——必须指向真实可用的JPG/PNG，所有srcset失败时才回退至此。
srcset 降级不是自动 fallback，而是浏览器择优后失败才回退到 src
很多人以为写了 srcset 就自带“多图容错”，其实不是。srcset 本身不处理加载失败，它只告诉浏览器“我有一组候选图，请你按设备像素比或视口宽度挑一个最合适的”。真正起兜底作用的，永远是 <img alt="HTML图片展示srcset怎么降级？保姆级操作流程" > 标签上那个基础的 src 属性——只要它指向一个真实可访问的 JPG 或 PNG，浏览器在所有 srcset 候选图都加载失败（404、CORS、超时）时，才会回退到这里。
常见错误现象：
– 页面显示空白或破损图标，Network 面板里 srcset 中的 URL 全部 404，但 src 也没加载
– 切换高 DPR 设备（如 iPhone 12），却始终加载同一张大图，srcset 像没生效
- 必须保留
src：哪怕你只打算用srcset，也要写一个最小可用图，例如src="/img/photo-thumb.jpg" - 不要把
src写成占位符路径如src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs"——它虽能防白屏，但无法触发自然解码，某些 UA 下仍会卡住布局 -
src图片建议尺寸小（如 320px 宽）、格式兼容（JPG/PNG）、CDN 托管、无查询参数（避免缓存/代理截断）
sizes 必须匹配 CSS 实际渲染宽度，否则 srcset 形同虚设
sizes 不是“建议尺寸”，而是给浏览器预加载器看的“这张图在当前页面里实际占多宽”。如果它和真实 CSS 布局对不上，浏览器就无法正确估算目标尺寸，大概率 fallback 到默认的 100vw，导致小屏也拉取大图，浪费带宽且易超时失败。
使用场景：响应式详情页中，图片在移动端占满视口、桌面端固定为 600px 宽
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法：
sizes="(max-width: 768px) 100vw, 600px"，且对应 CSS 中容器有明确max-width: 600px或width: 600px - 错误写法：
sizes="(min-width: 769px) 50vw"—— 缺少默认项，小屏下浏览器无从判断，直接按100vw加载 - 验证方式：DevTools → Network → 勾选
Disable cache，切不同设备模拟器，右键图片 →Copy → Copy response查看实际返回尺寸是否匹配预期
srcset 中 w 描述符必须与原图真实宽度一致，不能估算
srcset 后面的 320w、768w 不是“大概这个尺寸”，而是这张图文件本身的原始像素宽度。浏览器靠它和 sizes 计算出“我该加载哪张”，写错会导致匹配逻辑崩塌——比如你标了 photo-400w.jpg 400w，但实际文件是 800px 宽，浏览器就会误判所需资源，可能跳过这张图或选错档位。
性能影响：错标宽度描述符会让 Chrome/Safari 直接忽略整组 srcset，降级为仅加载 src，首屏 LCP 可能变差
- 用命令行确认真实宽度：
file photo-400w.jpg或identify -format "%wx%h" photo-400w.jpg - 不要混用
w和x：比如photo.jpg 1x, photo@2x.jpg 2x是密度模式；photo-400w.jpg 400w, photo-800w.jpg 800w是宽度模式；两者不可交叉 - 构建时若用脚本生成
srcset，务必读取文件头元数据，而非依赖文件名猜测
IE11 及老 WebView 下 srcset 完全无效，src 是唯一救命稻草
IE11、Android 4.4 WebView、部分旧版三星浏览器根本不解析 srcset 和 sizes，它们只认 src。如果你的 src 指向的是 WebP 路径或带 ?format=avif 的动态地址，这些浏览器会直接白屏——不是加载慢，是压根不认识格式。
容易被忽略的地方：
– 开发阶段双击 HTML 文件用 file:// 协议打开，srcset 在多数浏览器中也会被忽略，必须走本地服务（如 python3 -m http.server）测试
– src 路径写成 ./img/logo.jpg，上线后路由重写或嵌套路由（如 /product/123/detail）下极易 404，应统一用根路径 /static/img/logo.jpg
-
src必须是静态、无参数、高可用 JPG/PNG，推荐 CDN 托管 + 版本哈希（如/static/img/logo.a1b2c3.jpg） - 不要指望
onerror补救：IE11 支持onerror，但若src本身已 404，用户第一眼看到的就是破损图标，体验已受损 - 关键图（如商品主图）建议禁用
srcset，直接用单图 +src，确保零兼容性风险
