# 图片转 Base64 转换器: 无需 HTTP 请求即可嵌入图片
Base64 是一种编码技术, 它将二进制数据 (如图片) 转换为纯 ASCII 文本字符串。结果是一个 Data URI: 一个以 data:image/png;base64,... 开头的自包含 URL, 包含整个编码后的图片。通过将此代码直接嵌入 HTML、CSS 或 JSON, 图片无需任何额外的服务器 HTTP 请求即可加载——零网络延迟, 即时加载。 # 何时使用 Base64 图片
支持 Base64 的主要理由是消除网络请求。网页上的每张图片都意味着一次 HTTP 请求, 带有连接、DNS、TLS 握手和延迟的开销。对于非常小的关键图片——主应用程序图标、favicon、UI 图标——在 CSS 或 HTML 中以 Base64 嵌入可以消除该成本, 并保证它们即使在浏览器缓存任何内容之前也能立即显示。这种技术在 SPA (单页面应用程序) 中尤其强大, 其中 JavaScript 和 CSS 包在构建时生成: 在包中嵌入小图片可保证它们与代码一起加载, 无需额外请求。它对于 HTML 电子邮件也必不可少, 邮邮件客户端会拦截外部图片, 但几乎总是显示嵌入的 Data URI。 # Base64 图片的使用案例
-
HTML 内联: 关键图标使用 <img src="data:image/png;base64,...">。
-
CSS 背景: UI SVG 使用 background-image: url("data:image/svg+xml;base64,...")。
-
JSON 和 REST API: 在 JSON 负载中将图片作为文本数据发送。
-
HTML 电子邮件: 即使客户端拦截外部 URL 也会显示的嵌入式图片。
-
SVG 嵌入: 在 SVG 文件中将位图嵌入为内联数据。
# 转换在浏览器中如何工作
当您选择或拖动图片时, 浏览器的 FileReader API 直接从磁盘读取图片作为 RAM 中的二进制数据。 readAsDataURL() 方法使用 RFC 4648 算法将这些二进制字节转换为其 Base64 表示形式——原始数据的每 3 个字节表示为 Base64 字母表中的 4 个 ASCII 字符。结果包含自动检测到的正确 MIME 类型。
仅对小图片使用 (10 KB 以下)
Base64 会使文件大小增加约 33%: 10 KB 的图片变成约 13.3 KB 的文本。对于小图标和徽标, 此成本很小, 而消除 HTTP 请求可以弥补这一点。对于照片或大图片, 大小开销非常大——对于大图片, 请务必使用 CDN。 # 何时不使用 Base64
大图片请避免使用 Base64——请改用 CDN
如果图片大于 10-20 KB, Base64 会损害性能: 它会使 HTML/CSS 大小膨胀, 阻止浏览器独立缓存图片, 并在解析器处理巨型字符串时阻塞渲染。对于大图片, 请务必使用带有适当缓存头的 CDN 服务。 # 兼容性和私密性
Data URI 兼容 100% 的现代浏览器和大多数电子邮件客户端。我们的工具通过 FileReader API 在本地处理所有内容——您的图片绝不会离开您的设备。这使其适用于公司内部图片、私人截图或您需要转换为 Base64 的任何机密视觉内容。 # 结论: 最快且最私密的嵌入工具
正确应用时, 将图片转换为 Base64 是一项有针对性但非常强大的技术。对于零 HTTP 请求能带来改变的小型、关键图片使用它, 对于 CDN 总是胜出的大型图片则应避免使用。使用我们的工具, 您可以立即获得 Data URI, 而无需上传任何内容至服务器。