HTML中srcset降级设置有讲究？实操指南速览-html教程-PHP中文网

src 是 srcset 的唯一降级兜底，必须指向静态高可用资源；sizes 需准确反映实际渲染宽度，srcset 必须统一用 w 描述符且与原图真实像素一致；旧浏览器（如 IE11）完全忽略 srcset，仅依赖 src；所有格式图的 intrinsic 尺寸须严格一致，否则引发布局抖动。

html中srcset降级设置有讲究？实操指南速览

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 会让浏览器忽略整个列表
srcset 里的宽度值（如 400w）必须和原图真实像素宽度一致，不能写估算值；否则浏览器计算出的目标尺寸错位，选图失准

srcset 在旧浏览器里完全失效，`src` 是唯一救命稻草

IE11、旧版 Android WebView、部分 Safari ≤15.3 等根本不解析 srcset，它们只认 src。如果 src 指向空字符串、"#"、错误路径或动态接口地址（如 /api/image?uid=123），图片就彻底不渲染。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

src 必须指向一个静态、高可用资源：CDN 托管的 800w 主图、SSR 渲染出的 LQIP 模糊图，或至少是 1px GIF 占位符
禁止写 src=""、src="broken.jpg"（且该文件不存在）、src="./images/xxx.jpg"（部署后因路由重写易 404）
关键图（如商品主图）建议跳过 loading="lazy"，直接写死 src，避免旧浏览器忽略属性后无图可显

DevTools 验证时容易忽略的关键点

用 Chrome DevTools Network 面板看加载源，但若没禁用缓存、没检查响应头、没比对真实像素尺寸，结论可能全错。

务必勾选「Disable cache」再刷新，否则看到的是缓存结果，不是真实选图逻辑
右键图片 →「Copy」→「Copy response」确认返回尺寸是否与 srcset 中声明一致
检查响应头中的 Content-Type：WebP 必须是 image/webp，AVIF 必须是 image/avif，错一个字母或服务器返回 application/octet-stream，浏览器就静默跳过
用 file logo.webp 和 file logo.jpg 命令验证原始像素尺寸是否完全一致；不一致会导致布局抖动或拉伸