srcset仅支持同一格式下的分辨率匹配，无法实现WebP→JPEG等格式降级或网络失败fallback；真正能降级的只有++，其中为强制兜底且必须存在、路径有效，否则白屏。
srcset 本身不提供格式或网络失败降级能力，它只做“同一格式下的分辨率匹配”。想靠 srcset 自动从 WebP 切到 JPEG、或从高清图切到占位图，纯 HTML 行不通。
为什么 srcset + sizes 切换不了格式
浏览器看到 srcset="a.webp 480w, b.webp 768w"，就只加载 WebP；即使 a.webp 返回 404 或 Content-Type 错误，也不会跳去试 a.jpg。这不是 bug，是规范行为——srcset 不负责 fallback，只负责“选哪个尺寸”。
-
sizes只影响宽度计算，和文件是否存在、是否可解码完全无关 - 所有
srcset中的路径必须真实可访问，否则 Network 面板会显示 Failed，但页面不会自动补救 - 写成
srcset="a.jpg 480w, a.webp 480w"是无效的：浏览器按顺序选第一个匹配项，.jpg后缀不触发类型判断，WebP 浏览器仍会加载 JPG 并报解码失败
真正能降级的只有 + + ![]()
这是唯一被浏览器原生支持的格式/条件降级链。关键不是“哪个失败才用哪个”，而是“按顺序匹配，首个成功即停，
-
-
-
src必须指向一个静态可访问的 JPEG/PNG（不能带查询参数，不能是相对路径错误） - 漏掉
src是 404，整个区域就是白屏，连alt都可能不显示（取决于浏览器）
type 属性失效的三大硬坑
写了 type="image/webp" 却还是加载 JPEG？大概率卡在这三处：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 服务器返回的响应头
Content-Type不是image/webp—— 检查curl -I https://yoursite.com/a.webp，Nginx 要加types { image/webp webp; } -
type="image/jpeg"放在了type="image/webp"前面，浏览器匹配到第一个就终止 - 本地双击打开 HTML（
file://协议），多数浏览器直接忽略type判断，只走python3 -m http.server启服务验证
onerror 是唯一能应对 404 的方案
当图片地址彻底不可达（路径错、CDN 挂、断网），srcset 都无能为力，只能靠 JS 拦截 onerror 手动替换。
- 必须内联写：
onerror="this.src='/img/placeholder.svg'; this.onerror=null"，否则可能循环触发 - 避免 fallback 图也 404：推荐用内联 base64 SVG 占位，如
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiLz4" - 不要依赖
data-src：断网时 JS 加载失败，data-src根本读不到；所有降级资源地址必须静态存在于 HTML 中 - 动态创建的
onerror必须在appendChild()前绑定，否则首次错误捕获不到
最容易被忽略的是：所有格式图片（AVIF/WebP/JPEG）的原始像素尺寸必须完全一致，否则切换时 layout shift 无法避免；而 src 一旦不可访问，整个降级链就断在起点——它不是“备选”，是最后一道活命线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
