开发者工具 · Base64 编码器和解码器
数据 URI 解释：data:image/png;base64 如何工作以及它来自哪里
· 背景
base64 编码
data: URL 方案在 1998 中指定，作为将小资源直接嵌入到页面中的方法。这篇文章解释了它的语法、为什么 Base64 是可选的以及浏览器的限制。
是 1,300 字符 URL 的图标 — 遇到 data: URI 并读取其部分
数据：URI 将小资源直接嵌入 URL 中，避免单独的 HTTP 请求。该格式在 RFC 2397（在 1998 中定义）中指定，并使用具有方案、可选媒体类型、可选编码标志和有效负载本身的语法。例如，data:text/plain,hello 是包含单词 hello 的纯文本数据 URI。浏览器处理此内容的方式与处理 HTTP 请求的方式相同，但它不是通过网络获取内容，而是从 URL 本身进行解码。
数据 URI 最常见于小图像、CSS 图标和测试装置。具有 Base64 编码的 data: URI 如下所示： data:image/png;base64,iVBORw0K.... 细分为： data: 是方案； image/png 是媒体类型； ;base64是编码标志；长字符串是 Base64 编码的图像字节。当浏览器看到此 URL 时，它会解码 Base64 以恢复原始字节，然后使用这些字节呈现图像。
从可见语法中读取数据 URI — 媒体类型、可选的 Base64 标记和有效负载
如果省略编码标志（data:text/html,<p>hello</p>), ，则有效负载是百分比编码的 UTF-8 文本，而不是 base64。 ;base64 的存在告诉浏览器要应用哪种解码规则。 data: URI 中的媒体类型是 MIME 类型，与 HTTP Content-Type 标头中使用的类型字符串相同。 image/png, text/plain, application/json 和 image/svg+xml 是常见示例。如果未指定媒体类型，则默认为 text/plain;charset=US-ASCII.。
浏览器必须根据媒体类型确定如何渲染字节：如果显示 image/png,，则字节为 PNG；如果显示 text/html, ，则内容是 HTML。指定错误的媒体类型可能会产生令人困惑的结果；标记为文本 /plain 的 PNG 文件将显示为垃圾字符而不是图像。 Base64 在 data: URI 中是可选的。对于文本内容，百分比编码（与 URL 查询字符串中使用的编码相同）通常比 base64 更紧凑。数据 URI 使用者决定如何根据媒体类型和逗号之前的标记来解释有效负载。 Base64 编码器仅提供有效负载字符。它不添加 MIME 类型、选择字节是描述 PNG 还是 SVG，或验证组装的地址。
为什么 Base64 是可选的 — SVG 的百分比编码文本有效负载和纯文本与二进制的 Base64
URI data:text/html,<p>Hello</p> 包含作为文字字符的 HTML（对任何特殊字符（如引号或尖括号）进行百分比编码）。 Base64 对于无法表示为文本的二进制数据以及有效负载包含许多百分比编码会导致膨胀的特殊字符的情况非常有用。小的 SVG 或文本文件可能采用较小的百分比编码；二进制文件必须是 base64。手动构建 data: URI 需要了解媒体类型和编码。
对于 SVG 图标，您可以使用 data:image/svg+xml 后跟百分比编码的 SVG 标记或 ;base64 和 base64 编码的字节。对于百分比编码，请将 SVG 包装在 data:image/svg+xml, 中，然后对任何尖括号、引号和其他特殊字符进行百分比编码。结果很长但人类可读。对于 Base64，获取 SVG 字节，将它们编码为 Base64，并生成 data:image/svg+xml;base64,，然后附加 Base64 字符串。对于二进制来说，Base64 通常更紧凑，但对于 SVG 文本，百分比编码形式可能更短。
工作示例：手动为小型 SVG 构建 data: URI — 将标记编码为文本并组装字符串
浏览器和消费应用程序可以对数据 URI 施加限制或策略限制，但此存储库不建立可移植的数字上限。内存使用、解析器行为和安全策略还取决于值出现的位置，因此测试确切的目标浏览器和嵌入上下文，而不是依赖于记住的限制。
5 MB 嵌入图像都会使页面大小膨胀。数据 URI 最适合小型资源：CSS 图标、小图像或测试数据。对于大文件，外部请求速度更快，因为浏览器可以缓存响应并跨多个页面重用它； data: 每次页面加载时都会内联 URI。
在消费应用程序中验证而不是假设的浏览器和安全边界
常见阈值是几千字节；在此之下，data: URI 是高效的；除此之外，外部文件通常更快。安全和浏览器策略限制数据：某些上下文中的 URI 使用。通常会阻止顶级导航（单击指向包含 HTML 内容的 data: URI 的链接）以防止网络钓鱼。脚本 src 属性中的 data: URI 可以执行任意 JavaScript，从而产生安全风险。
浏览器将内容安全策略 (CSP) 规则应用于数据：URI；严格的 CSP 可能会完全禁止它们。 data: URI 通常允许在 img src 或 iframe src 中使用，但嵌入样式或脚本上下文中可能会受到限制。请务必检查目标环境的浏览器兼容性和安全策略。 CSS 中的数据 URI 对于小背景图像很常见。语法相同： url(data:image/png;base64,...).
其中数据：URI 仍然是正确的工具 — CSS 图标、电子邮件安全的内嵌图像和测试装置
带有嵌入数据的 CSS 文件：URI 可以作为包含所有图像的单个文件提供，从而减少 HTTP 请求。这对于小图标集或简单图形很有用。 CSS 中嵌入的大图像会使文件膨胀并减慢其解析速度。现代构建工具（如 webpack）可以自动将小图像转换为数据：CSS 中的 URI，将外部图像转换为普通 URL，从而平衡性能。
data: URI 格式由 RFC 2397 定义，这是一个简短的文档，指定语法但未定义 data: URI 可以或不可以在何处使用。浏览器供应商基于安全和性能问题添加了自己的限制。
这不包括什么 — blob：URL、对象 URL 和文件系统访问
某些系统已弃用数据：某些上下文中的 URI 支持（例如 CSP 级别 3 中的表单操作）以防止滥用。当使用 data: URI 时，在目标浏览器中测试它； RFC 表示该格式有效，但浏览器的安全策略可能会阻止它。
手动创建数据：URI 在生产中并不常见；大多数构建工具和库都会处理转换。但了解格式对于调试很有用。如果您在 CSS 或 HTML 中看到很长的 data:image/... URL，您可以使用 Base64 编码器和解码器工具对其进行解码：删除 data:image/...;base64, 前缀，将剩余的字符串粘贴到工具中，然后对其进行解码以查看实际字节。
要点：具有严格语法的小格式 — Base64 编码器和解码器如何处理文本编码步骤，以便您可以组装有效的 URI
对于 SVG 数据：URI，您可以对文本表单进行百分比解码并读取 XML 标记。了解数据的结构：URI 可以更轻松地排除嵌入资源的故障。数据 URI 是一种 Web 标准 (RFC 2397)，允许将资源直接作为 URL 嵌入。对于无法从单独缓存中受益的小型、稳定的资源，它们最为有效。该格式包括可选的媒体类型规范和编码标志（base64 或隐含的百分比编码）。
Base64 编码对于二进制数据是必需的，但对于文本是可选的；百分比编码的 SVG 更具可读性。浏览器安全策略限制 data: URI 的使用位置，因此了解目标环境中的限制至关重要。 Base64 编码器和解码器工具可以帮助您手动编码资源或解码嵌入的 URI 以检查其内容。