图片降级的核心是用最小代价加载最合适的资源，需严格配对srcset与sizes、正确声明picture格式降级顺序、确保src始终可用、避免懒加载静默失效，并落实onerror、rootMargin、decode等细节控制。
图片降级不是为了“让图变小”，而是让浏览器在不同网络、设备、能力条件下，**用最小代价加载最合适的资源**。只压尺寸或只换格式，都可能破坏这个平衡。
srcset + sizes 必须配对，否则流量不降反升
只写 srcset 不配 sizes，浏览器会按默认 100vw 估算宽度，手机可能加载桌面图；只写 sizes 不配 srcset，又退化成单图加载，失去响应式意义。
-
sizes告诉浏览器“这张图在页面里实际占多宽”，比如sizes="(max-width: 768px) 100vw, 50vw" -
srcset提供多个候选资源，必须带宽度描述符（如400w），不能只用2x—— 否则 Safari 可能忽略整组 - 服务端返回的图片尺寸要和
srcset中声明的严格匹配，否则浏览器选错源、解码浪费 CPU
格式降级必须显式声明 type，且顺序从新到旧
浏览器按 <source></source> 顺序匹配：第一个 type 被支持、且资源 HTTP 状态为 2xx 的生效。但若服务器返回 AVIF 却设了 Content-Type: image/jpeg，Chrome 直接跳过该 <source></source>，连错误都不报。
- 正确顺序：
<source type="image/avif" srcset="a.avif"></source>→<source type="image/webp" srcset="a.webp"></source>→<img src="a.jpg" alt=""> - 每个
<source></source>的srcset也要含至少两个宽度描述符（如a-400.avif 400w, a-800.avif 800w），否则部分浏览器不识别 -
<img alt="HTML图片降级怎么兼顾加载性能" >的src不是“备用”，而是最终 fallback 渲染入口，必须指向一个真实可访问地址（如 CDN 托管的占位图），不能是broken.jpg
loading="lazy" 单独用等于放弃控制权
不支持该属性的浏览器（如 Safari ≤15.6、旧 Android WebView）会直接忽略 loading="lazy"，然后加载 src。如果 src 是空、"#" 或被 CSS 隐藏，结果就是白屏——不是没加载，是根本没资源可加载。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
src必须始终可用：推荐 1px GIF、内联 SVG 占位（data:image/svg+xml;base64,...）或 SSR 渲染出的小图 -
data-src存高清图地址，且必须静态写在 HTML 里（不能靠 JS 注入），断网时才不会丢 - 关键图（如商品主图、头图）绕过懒加载：直接写死
src，不加loading="lazy"，也不设data-src - 避免
display: none包裹容器——Safari 和多数 Android WebView 会跳过 IntersectionObserver 观察，后续显示也无效
IntersectionObserver 手动实现要防三类静默失效
原生 loading="lazy" 无法处理加载失败、无法控制提前量、不兼容低版本。手动实现时，最容易被忽略的是三类“静默失效”场景：
- 没绑定
onerror：404 或 CORS 拦截时留白，应加img.onerror = () => img.src = '/placeholder.svg' -
rootMargin设太大（如'500px'）：滚动慢时提前加载过多图，浪费带宽；设太小（如'0px'）：快速滚动时闪白 - 没调
img.decode().catch(() => {})：大图同步解码阻塞主线程，滚动卡顿，尤其低端安卓机
真正兼顾性能的降级，不是堆砌技术点，而是让每张图在任意时刻都有明确的加载路径、确定的 fallback 入口、以及可验证的状态反馈——比如 src 是否真能返回 200，Content-Type 是否匹配 type，onerror 是否真的触发。这些细节不显眼，但缺一不可。
