Data URI场景？
活动落地页想把 favicon 与小箭头图标一次性塞进 HTML、邮件签名里要内联透明 PNG、运营同学的「离线 demo」只有单文件——Data URI 把 MIME、Base64、前缀 data: 拼成一串，浏览器或邮箱客户端一次下载即可渲染。在线 Data URI 生成的头号雷区是漏写逗号、MIME 写成不存在的类型、以及直接把两兆海报塞页面导致白屏与 CSP 拦截。市场与前端撕扯体积时，用工具先量一下 Base64 长度，再决定改用 CDN 外链。把 Data URI 限制在图标级与小 SVG 试验，别让它成为性能与缓存失效的黑洞；若走 SVG 内联，还要同步安全团队的 XSS 消毒策略。
如何拼出可被浏览器与邮件客户端识别的 data:image Base64 串
- 确认资源类型写 image/png、image/svg+xml 等准确 MIME，并把原始二进制先压缩到合理 KB 级；超大资源应改走外链，否则 Lighthouse 与邮件安全网关都会报警。
- 按 data:[<mediatype>][;base64],<data> 语法拼接，注意逗号只能出现一次分隔头与体；在空白 HTML 里试渲染通过后再合并进正式模板，避免 CSP img-src 或 default-src 阻断。
- 上线前用真实邮箱客户端回归，记录各客户端大小限制；活动结束后把内联资源迁到 CDN 并保留哈希校验，别让临时 Data URI 变成永久技术债。
Data URI 常见问题
我把整页背景图都做成 Data URI 后 SEO 与首屏 LCP 指标崩了，这属于前端实现问题还是产品需求本身不合理？
大体积内联会阻塞 HTML 下载与解析，搜索引擎也会认为页面臃肿；应拆分为可缓存静态资源并使用 preload、响应式 srcset。若业务强需求内联，需明确接受性能指标下降并在监控里单独跟踪。
Outlook 对 data:image 支持差，运营坚持要一封邮件里看到图，我有没有折中方案既不炸 Gmail 又不牺牲 Outlook？
可对 Outlook 使用 VML 回退、对其他客户端使用 img 外链，这是成熟响应式邮件实践；不要指望单一巨型 Data URI 兼容所有客户端。用工具生成双模板并在真实设备上冒烟。
Content-Security-Policy 里加了 img-src self 后内联 Data URI 全挂，这是策略写错还是本来就该禁止？
CSP 默认不信任内联 data:，需要显式加入 data: 或 hash/nonce 策略；安全团队若禁止，是防止数据外泄与 XSS。请走变更流程调整 CSP，而不是让前端私改 meta 绕过。
SVG Data URI 里含有 script 标签被过滤器删掉导致图标缺角，这是编码问题还是 SVG 源文件本身不安全？
多数平台会剥离可执行内容；应使用清理过的静态 SVG，移除 foreignObject 与事件处理器。把责任归到「编码坏了」会掩盖真正的供应链风险，需设计侧先过安全扫描。
我想从浏览器开发者工具里复制 Elements 面板生成的 Data URI 到设计稿，长度总是缺尾巴，这是 DevTools 限制还是我复制姿势不对？
DevTools 可能对极长属性值折叠显示，直接复制会截断；应回到源文件或网络面板下载原始响应。对关键资产建立版本库，别依赖一次性复制链。