内嵌图片会把文件字节放进 HTML、CSS 或其他文档中，可以让小型文件独立分发，但也会把图片与文档的下载、缓存绑定。应根据完整流程判断，不能认为 URL 越少，页面一定越快。
构建正确前缀
PNG 的前缀是 data:image/png;base64,，后面跟原文件的 Base64。JPEG 使用 image/jpeg，WebP 使用 image/webp。修改类型名称不会转换图像格式；接收方需要 JPEG 时，必须先重新编码图片。
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="图片内容说明" width="32" height="32">这里的占位符不是可显示图片，需要替换成完整编码。若编码结果已经包含 data:，不要再加一次。粘贴时注意引号完整，也要防止富文本编辑器插入换行。
计算实际代价
编码部分每三个字节变成四个字符，末组补齐。30,000 字节的图片会产生 40,000 个字符，外加前缀。HTML 压缩可能影响传输体积，但浏览器仍要解析文档并解码图片，因此应测试完整页面。
独立图片可以跨页面缓存复用；内嵌图片与每个包含它的文档绑定。大型重复插图通常不适合自动内嵌，小型独立报告中的一次性图标则可能适合。
验证接收环境
内容安全策略可能限制 data: 图片，邮件客户端也可能移除或拒绝显示。自己的浏览器能预览，并不能证明收件人的应用兼容。应测试实际导出文件与目标客户端。
临时本地预览通常可用 Blob URL，避免创建很长的 Base64 字符串；视图移除后应释放 URL。导出独立 HTML 时可以考虑 Data URI。两者都应保留替代文字和尺寸。语法与浏览器行为见 MDN: data URLs。