首屏关键图不必强制Base64内联，仅当体积≤2KB、不常更新且需JS禁用时立即呈现才推荐使用；大图应走外链+回退，工具自动处理更安全，内联需注意MIME类型、可访问性及性能影响。
首屏关键图必须用 Base64 内联吗？
不是必须，但对特定场景是目前最可控的降级手段。前提是这张图体积 ≤2KB、不常更新、且 JS 禁用或加载失败时仍需立即呈现——比如 SSR 页面的 logo、loading 动画、表单提交后的状态图标。
常见错误是把 100KB 的 banner 图也转成 Base64：HTML 文件暴涨、首屏解析卡顿、gzip 压缩率反而下降，Lighthouse 直接报 “Avoid enormous network payloads”。
- 真正需要内联的只有：SVG 小图标、1×1 占位 GIF（
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==）、邮件模板中的 logo、CSP 严格模式下无法外链的 loading spinner - 大图、轮播图、商品主图一律走
回退结构，而不是硬塞 Base64 - 构建工具自动处理比手动粘贴更安全：Vite 默认
assetsInlineLimit: 4096，Webpack 用url-loader设limit: 2048
会，而且很隐蔽。因为 内容只在 JS 禁用时渲染，此时浏览器不会执行 JS 运行时路径解析逻辑，相对路径（如 src="./logo.svg"）直接失效，返回 404。
稳妥做法只有两个：
- 用绝对路径：
src="https://example.com/assets/logo.svg"—— 但依赖服务端可访问性，CDN 不可用时照样挂 - 直接内联 Base64：
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSJibHVlIi8+PC9zdmc+"—— 绕过路径解析，JS 禁用时照常显示
注意 MIME 类型必须精确：image/svg+xml 不能写成 image/svg，image/png 不能写成 image/jpg，否则旧版 Safari 直接忽略。
CSS 中用 background-image: url(data:...) 安全吗？
不推荐用于首屏关键图。它比 HTML src 更难排查问题：Network 面板看不到请求、控制台不报错、图片空白时只能去 Computed Styles 里查 background-image 值是否为空。
尤其要注意：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须带引号：
background-image: url("data:image/svg+xml;base64,xxx");—— 缺引号或末尾少分号，整条规则失效 - 伪元素
::before { content: url(data:) }在 Safari 上支持不稳定，改用background-image更可靠 - CSS 中的 Base64 不随 SSR HTML 一起输出，若样式文件未内联或未预加载，首屏可能短暂空白
- 无法响应
onerror，也没有loading="lazy"控制权，纯样式层加载时机不可控
Base64 图片在
要，而且必须手动加。屏幕阅读器不会自动识别 里的内容为“降级版本”，它只按语义解析 DOM。
例如商品列表降级结构：
<noscript>
<div aria-label="商品列表（JavaScript 已禁用）">
@@##@@
<p>iPhone 15 Pro｜¥7,999</p>
</div>
</noscript>
关键点：
-
alt，不能空也不能用占位符文字 - 如果里面是表单，
和的 ID 必须严格匹配 - 链接不能写“点击这里”，得写明目的，比如“下载 PDF 凭证”
-
不是自动可访问补丁，它是另一套独立 DOM，得像写新页面一样对待
最容易被忽略的是：Base64 字符串本身很长，塞进 HTML 后会让解析变慢，尤其在低端安卓机上。别为了省一个请求，把首屏渲染堵死在字符串解码阶段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
