srcset 是浏览器按设备能力自主选图的机制，非降级；必须配 sizes、基础 src，确保 WebP 响应头正确及图片 intrinsic 尺寸一致，否则导致白屏或带宽浪费。

srcset 不是“降级”，它是浏览器按设备能力自主选图的机制；写错 sizes 或漏掉基础 src，反而会让图片在部分设备上加载失败或浪费带宽。

为什么 srcset 加了却没生效

常见现象：写了 srcset="small.jpg 480w, large.jpg 1200w"，但 Chrome DevTools Network 面板里始终只加载 large.jpg，甚至小屏也拉大图。

• 没配 sizes：浏览器默认按 100vw 计算目标尺寸，直接选最大图；必须补上，比如 sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
• 480w 中的宽度值不是“显示宽度”，而是原图真实像素宽——用 file small.jpg 或图像编辑器确认，不能靠估算
• 基础 src 属性为空或缺失：src 是所有不支持 srcset 的旧浏览器（如 IE11）唯一入口，也是现代浏览器的最终 fallback，必须写且指向可用资源
• 缓存干扰：DevTools 里没勾选 “Disable cache”，导致看到的是上次加载结果；刷新前务必禁用缓存再验证

srcset 和 picture 到底该用哪个

简单说：srcset + sizes 解决「同一格式下不同分辨率/像素密度」的问题；picture + source 才解决「不同格式（WebP/AVIF → JPEG）」的降级。

DeepBI DHTML 页面生成器

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

下载

• 只换清晰度、不换格式 → 用
• 要让 Safari 14+ 加 WebP、IE11 加 JPG → 必须用
• 混着用会出问题：比如在 里写 srcset 却漏了 type，整条 被跳过，直接退到
• 在 里不是“可选备用”，是强制存在的兜底层；删掉它，IE 和老 Android 就白屏

容易被忽略的兼容性硬伤

你以为写对了，但用户打开就是空白——大概率卡在这几个点上。

• 服务器没配对 WebP 的 Content-Type：Nginx 需加 types { image/webp webp; }，否则即使写了 type="image/webp"，Safari 也会静默跳过
• 本地双击打开 HTML 文件（file:// 协议）：Chrome/Firefox 会忽略 type 匹配逻辑，直接走 ；开发时必须起本地服务，例如 python3 -m http.server
• 所有格式图原始尺寸不一致：WebP 是 800×450，JPG 是 798×449，切换瞬间会重排布局；用 exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg 强制统一
• 的 alt 被当成失败提示：别写 alt="图片加载失败"，这是无障碍灾难；应描述图像本意，比如 alt="产品详情图：白色T恤正面平铺展示"

真正起作用的从来不是标签数量，而是 是否永远可用、type 与响应头是否严丝合缝、所有图的 intrinsic 尺寸是否完全一致——这三处任一出错，降级就变成静默白屏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！