src是唯一fallback，srcset仅辅助选图；src必须真实可用且与srcset中w值严格一致，否则加载失败即白屏。

srcset 本身不提供“降级”能力，它只负责让浏览器选一张最合适的图；真正起作用的是 src 属性——它是所有不匹配 srcset 条件或加载失败时的唯一 fallback。

srcset + sizes 必须配对使用，否则多数浏览器直接忽略

只写 srcset 不写 sizes，Chrome 会按 100vw 估算宽度，Safari 可能完全跳过整个属性。这不是 bug，是规范行为。

• sizes 告诉浏览器“这张图在页面里实际占多宽”，不是容器 CSS 宽度，而是渲染后占据的视口比例，例如：sizes="(max-width: 768px) 100vw, 50vw"
• srcset 中所有项必须统一用 w 描述符（如 photo-400w.jpg 400w），混用 2x 和 400w 会导致整组失效
• 即使只支持现代浏览器，src 也必须保留，且指向一个真实可访问的图（如 CDN 上的 800w JPG），IE 和旧 WebView 会直接加载它

常见加载失败却没回退到 src 的原因

用户看到白屏或破损图标，往往不是 srcset 没生效，而是 src 本身不可用。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• src 指向了空值（src=""）、占位符（src="#"）或 404 路径，浏览器加载失败后不会“再试一次”，而是停在空白状态
• 用了 loading="lazy" 但没配 src，断网时 JS 加载失败，data-src 根本不存在，src 又为空，结果就是纯白屏
• 服务端返回了 200 状态码但内容是 HTML 错误页（比如 Nginx 50x 页面），浏览器认为“加载成功”，但解码失败，此时也不触发 onerror

验证 srcset 是否真起作用的实操方法

别只看页面显示正常——要确认浏览器到底请求了哪张图，以及失败时是否落到 src。

• 打开 DevTools → Network 面板 → 勾选 Disable cache 和 Large rows，刷新后直接看图片请求的 URL 和响应尺寸
• 用设备模拟器切换 DPR：iPhone 12（3x）、Mac Retina（2x）、普通笔记本（1x），观察请求路径是否随 DPR 变化；不变说明 srcset 或 sizes 未对齐布局
• 手动删掉 HTML 中的 src 属性，刷新——如果页面立刻出现破损图标或空白，说明你之前依赖的“降级”根本不存在，只是侥幸没出问题

最容易被忽略的一点：所有 srcset 项的真实像素宽度必须和文件名/路径中声明的 w 值严格一致，差 1px 都可能导致浏览器计算错目标尺寸，最终选错图甚至退回到 src ——而如果你的 src 图又太大，首屏就卡住了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！