src属性是图片降级的底线，当srcset解析失败或所有候选不匹配sizes时才回退；若选中项加载失败（如404），浏览器不会自动切到src，必须用onerror手动处理并防重入。

srcset 本身不提供“降级”能力，它只负责让浏览器从多个候选资源中选一个加载；真正起降级作用的是 src 属性——当 srcset 所有选项都不可用（不匹配、加载失败、解析错误）时，浏览器会回退到 src 指向的图。

为什么写了 srcset 还是加载了大图？

根本原因是没配 sizes，或 sizes 写得和实际布局不符。浏览器无法预估图片渲染宽度，只能按默认策略（如 100vw）选最保守的源，结果就是低端手机也拉 2000w 的图。

• sizes 必须反映图片**在页面中实际占的宽度**，不是容器宽，也不是视口宽；常见写法：sizes="(max-width: 768px) 100vw, 50vw"
• 所有 srcset 项必须统一用 w 描述符（如 photo-400.jpg 400w），混用 x（如 2x）会让整个 srcset 被忽略
• src 属性不能省——它是 IE11、旧版 WebView 等不支持 srcset 的浏览器唯一能识别的入口，也是所有现代浏览器的最终 fallback

srcset + sizes 配合 picture 时的陷阱

很多人想把格式降级（AVIF → WebP → JPG）和分辨率适配（400w/800w/1200w）揉在一起，但 srcset 本身不处理 type，只有 支持。直接在 上写 srcset，再套 ，反而会破坏链路。

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

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

下载

• 格式+分辨率混合降级，必须把每种格式的完整 srcset+sizes 拆到各自的 里，例如：
• 在 内不能带 srcset，否则它会被当作独立资源参与匹配，可能绕过 逻辑
• 所有 的 srcset 中的 URL 必须真实可访问；某一项 404 不会报错，但该 直接失效，浏览器继续往下找

加载失败后 srcset 会自动切到 src 吗？

不会。浏览器只在 srcset 解析失败（比如语法错、描述符混用）、或所有候选都不满足 sizes 计算出的宽度条件时，才用 src。如果某个 srcset 项被选中但加载 404 或 CORS 失败，浏览器**不会自动 fallback 到 src**，而是显示破损图标。

• 要应对运行时加载失败，必须监听 error 事件，并手动设置 this.src = fallbackUrl
• 防重入很关键：加 data-attempted 标记或检查当前 src 是否已为 fallback 地址，否则一次失败可能触发无限循环
• fallback 图应体积小、格式兼容（如 WebP 或 PNG），且路径稳定；避免 fallback 图本身又 404

最容易被忽略的一点：无论你堆了多少层 srcset 和 ，只要 的 src 不可用（空、404、CORS），整条链就断了——用户看到的只会是破损图标，而不是“下一级”。所以 src 不是备选，是底线。

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