srcset 不感知网速，仅依据 devicePixelRatio、视口宽度和 sizes 选图；弱网降级需 picture + media + JS 或服务端干预，fallback 必须设 src 兜底，配合现代格式、CDN 优化与缓存策略才能真正生效。
srcset 本身不自动降级，浏览器按设备能力选图，不是按网速
很多人误以为 srcset 能“感知网速”并自动切小图，其实它只看 devicePixelRatio、视口宽度、sizes 声明的布局尺寸——完全不读取 navigator.connection.effectiveType。弱网下，浏览器仍会照常请求 2x/3x 图，导致加载卡顿甚至失败。
真正能触发降级的，是搭配 picture + media + JavaScript 主动干预，或服务端根据 UA/请求头做响应式分发。
- 纯
srcset场景下，降级只能靠 fallback：src属性必须填一张最小可用图（如 400w 或 1x），作为所有不支持srcset或 JS 未就绪时的兜底 - 不要把高分辨率图全塞进
srcset：比如移动端根本用不到 3000w 的图，加了反而增加解析开销和内存占用 -
sizes必须写准：若声明sizes="(max-width: 768px) 100vw, 50vw"，但实际 CSS 中容器在小屏下只占 50vw，浏览器就会错估，可能加载过大的图
用 picture + media 实现基于视口+连接类型的硬性降级
想让 3G 用户强制看到小图，就得绕过浏览器默认逻辑，用 picture 显式声明不同网络条件下的资源路径。目前最可靠的方式是结合 media 查询与服务端特征（如 Save-Data 请求头）或客户端 JS 切换 source 元素。
纯前端可落地的做法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 在页面加载早期（
里）注入一段轻量 JS，读取navigator.connection?.effectiveType，然后动态设置picture内source的srcset - 为节省首次渲染阻塞，把降级逻辑封装成
async函数，不 await，只在 DOM ready 后执行替换 - 示例结构：
<picture> <source media="(max-width: 768px) and (prefers-reduced-data: reduce)" srcset="dog-400.jpg"> <source media="(max-width: 768px)" srcset="dog-800.jpg 1x, dog-1200.jpg 2x"> <source media="(min-width: 769px)" srcset="dog-1200.jpg 1x, dog-2400.jpg 2x"> <img src="dog-400.jpg" alt="dog"> </picture>
- 注意：
prefers-reduced-data是 Safari / Chrome 支持的原生媒体查询，需用户手动开启“低数据模式”，不能替代 JS 检测
图片格式选型直接影响降级效果
就算你用 srcset 提供了多张 JPEG，弱网下依然慢——因为 JPEG 压缩率低、解码耗 CPU。真正能兼顾清晰度与加载速度的，是现代格式的渐进式加载能力。
- WebP/AVIF 支持有损压缩 + 更高压缩比：同质量下体积比 JPEG 小 30%~50%，对 3G 网络意义巨大
- 但注意兼容性断层：iOS 14 以下不支持 AVIF，Android 低端机 WebP 解码可能卡顿（尤其大图），需用
picture回退到 JPEG - 不要只依赖格式转换：压缩参数比格式本身更重要。例如
mozjpeg的progressive: true可让 JPEG 分块渲染，比 baseline JPEG 更早出图 - 服务端若支持，优先用
Accept: image/avif,image/webp,*/*做内容协商，避免前端重复判断
CDN 和缓存策略才是弱网体验的隐藏开关
再好的 srcset 配置，如果 CDN 没缓存、没开启 Brotli、没做边缘图像优化（如 Cloudflare Image Resizing、Akamai Image Manager），用户照样等。
- 确保静态图片资源设置了长缓存（
Cache-Control: public, max-age=31536000），并用版本哈希或时间戳更新 URL - 启用 Brotli 压缩（比 Gzip 平均再省 15% 体积），尤其对 SVG 和文本类资源收益明显
- CDN 边缘节点开启“图像自适应”：根据
User-Agent或Accept头自动转 WebP/AVIF，并缩放至sizes所需尺寸，避免前端传一堆冗余图 - 关键首屏图建议预加载：
<link rel="preload" as="image" href="dog-400.jpg">，但仅限真正首屏可见的 1~2 张
srcset，而是把设备能力、网络信号、服务端能力、CDN 配置、图片格式、压缩参数这五层拧成一股绳——漏掉任何一层，降级就只是纸面逻辑。 
