src属性是最终降级防线，浏览器在srcset加载失败或不匹配时回退至此；它必须指向真实可访问、兼容性高、轻量的图（如800w主图或LQIP），不可为空、占位或无效路径。
srcset 本身不降级，它只提供候选资源；真正起降级作用的是 src 属性——浏览器在所有 srcset 项加载失败或不匹配时，会回退到 src 指向的图。省心的关键是让 src 始终可用、兼容、轻量。
srcset + sizes 配错就白忙活
只写 srcset 不配 sizes，或者 sizes 写成固定值如 "100vw"，浏览器会按视口宽度估算渲染宽度，大概率选中 1200w 或 2x 图，哪怕用户用的是 320px 宽的低端手机。
-
sizes必须反映图片**实际渲染宽度**，不是容器 CSS 宽度；常见写法：sizes="(max-width: 768px) 100vw, 50vw" -
srcset中所有项必须统一用w描述符（如photo-400.jpg 400w），混用x和w会让浏览器忽略整个列表 - 若用
x描述符（如photo.jpg 1x, photo@2x.jpg 2x），则无需sizes，但无法适配不同视口宽度
src 是最终防线，不能凑合
src 不是“备选”，而是所有不支持 srcset 的旧浏览器（如 IE11）和所有加载失败场景下的唯一兜底。它一旦失效，就是白屏或 alt 文字裸露。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 务必保留
src属性，且指向一个真实可访问的图：推荐 CDN 托管的 800w 主图，或主站同域下稳定的 LQIP / 1px GIF - 避免
src=""、src="#"、src="data:image/gif;base64,..."等不可缓存或易挂路径 - 不要把
src当占位符——它得能在浏览器地址栏直接打开并返回 200
别指望 srcset 自动 fallback 到 WebP/JPEG
srcset 只管分辨率/DPR 选择，不管格式兼容性。写 srcset="a.webp 1x, a@2x.webp 2x"，Safari ≤13.1、IE、老 Android WebView 会直接卡住，不发请求也不显示 src 图。
立即学习“前端免费学习笔记（深入）”；
- WebP/AVIF 降级必须用
<picture></picture>，srcset仅用于同一格式内的响应式变体 - 如果硬要用
srcset塞 WebP，必须确保src指向 JPEG/PNG，且该图尺寸、构图与 WebP 一致，否则切换时拉伸或偏移 - CDN 动态转码（如
photo.jpg?format=webp）不可靠：不支持 AVIF 的浏览器可能收到 406 或损坏二进制，照样白屏
容易被忽略的布局抖动源
没设宽高或 aspect-ratio 是最隐蔽的体验断点。图片加载前若未预留空间，加载完成瞬间会撑开容器，导致文字跳动、按钮位移、CLS 飙升。
- 必须为
<img alt="HTML代码srcset怎样降级最省心？轻量配置思路" >显式设置width和height，或用 CSS 设置aspect-ratio - 若用
srcset+sizes，建议按最大可能渲染尺寸设宽高，或用aspect-ratio: calc(16 / 9)这类动态计算 - 避免用
display: none包裹图片容器——Safari 和多数 Android WebView 会跳过该元素，后续显示也无效
