src是必须写的，因为它是所有不支持srcset的旧浏览器（如IE11）或解析失败时的唯一fallback；srcset仅是增强特性，浏览器不识别即忽略，不会自动降级，必须依赖src指向真实可用图片。
srcset 本身不提供“降级”能力，浏览器按自身条件（设备像素比、视口宽度等）自主选择最匹配的资源；所谓“降级”，实际是靠 src 属性兜底——只要写了 src，它就是所有不支持 srcset 的旧浏览器（如 IE）或解析失败时的唯一 fallback。
为什么 src 是必须写的，不是可选的
很多开发者以为只写 srcset + sizes 就够了，结果在 IE11 或某些邮件客户端里图片直接不显示。这是因为：srcset 是增强特性，浏览器不识别就忽略整条属性，但不会自动退到某张图——它只会看 src。
-
src必须指向一张真实可用的图，建议是中等分辨率、通用性强的版本（比如 1200px 宽、1x下清晰的 JPG） - 不要用占位图或空字符串，否则旧环境里会触发
onerror或显示破损图标 - 现代浏览器仍会加载
src，除非被srcset中更匹配的项明确覆盖（且该资源成功加载）
srcset 值里放 x 还是 w？别混用
两种语法底层逻辑不同，混在同一个 srcset 里会导致整个属性被浏览器忽略（Chrome 和 Safari 都会静默失效）。
-
x描述设备像素比：适合头像、图标等固定尺寸容器，例如avatar@2x.jpg 2x -
w描述资源固有宽度：必须配合sizes使用，适合响应式内容图，例如photo-400w.jpg 400w, photo-800w.jpg 800w - 判断依据很简单：如果
<img alt="HTML代码srcset降级设置手把手教程" >的 CSS 宽度是固定值（如width: 200px），优先用x；如果是百分比或max-width，必须用w+sizes
sizes 不写或写错，srcset 就白配了
sizes 不是“建议尺寸”，而是告诉浏览器：“这张图在当前页面布局下，最终渲染宽度大概是多少”。没有它，浏览器无法从 w 列表里做合理选择，可能始终加载最大图。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 常见错误：
sizes="100vw"写死，但实际图只占半屏——浏览器误判为需要全宽资源，浪费带宽 - 推荐写法：用媒体查询描述真实布局，例如
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 注意单位：只接受
vw、px、em等 CSS 长度单位，不能写%或无单位数字 - 可以用
calc()，比如sizes="calc(100vw - 2rem)"，但确保所有浏览器都支持（IE 不支持）
验证是否生效？别只看 Network 面板
浏览器 DevTools 的 Network 标签页显示的加载资源，受缓存、设备模拟器设置、甚至开发者工具是否开启“Disable cache”影响极大，容易误判。
- 真机测试最可靠：用 iPhone 打开，检查实际加载的是
@2x还是@3x图；用 Chrome 模拟 Nexus 5X（2.625x），看是否加载了对应2.625x条目 - 用
console.log(img.currentSrc)直接读取最终生效的地址，比 Network 更准 - 禁用 JS 后再刷新一次，确认
src是否正常加载——这是检验降级链是否完整的关键一步 - 特别注意：Safari 对
sizes解析较严格，漏掉括号或空格不合法就会回退到src
最易被忽略的一点：服务器要正确返回图片的 Content-Type（如 image/webp），否则即使 srcset 里写了 .webp，部分安卓 WebView 会拒绝解码，静默 fallback 到 src——而你根本看不到报错。
