图片转 Base64 的工作原理
整个转换流程在浏览器中通过 File API 和内置的 btoa 函数完成 — 无需下载编解码器库，服务器也不会看到图片。以下是完整的处理管道：
- 拖入或选择图片。浏览器从本地磁盘将其读取为 Blob，字节不会复制到服务器。
- 文件以 1 MB 为单位分块读取，每块的字节追加到二进制字符串中。分块处理可防止大型图片导致 JavaScript 调用栈溢出。
- 将二进制字符串传入 btoa，该函数将每三个字节映射为四个 Base64 字符，字母表为 A–Z、a–z、0–9、加号和斜杠。
- 从 File 对象读取文件的 MIME 类型（image/png、image/jpeg 等），并作为 data: 前缀拼接，生成完整的 data:image/…;base64,… URI。
- 页面从该 URI 组装四种输出 — 完整 data URI、无前缀的原始 Base64、可直接粘贴的
标签以及 CSS background-image 片段 — 每种输出均附有复制按钮。
为什么将图片编码为 data URI？
- 将小图标或 logo 内联为 data URI 可省去单独的网络往返，使页面或邮件在首帧渲染时更快。
- 包含内联图片的页面或样式表是自包含的，可离线使用，复制时无需携带整个资源文件夹。
- 许多邮件客户端默认阻止外链远程图片。将 logo 内联为 Base64，邮件打开时即可立即显示，无需远程拉取。
- 编码完全在浏览器中完成，敏感图片不会传输至第三方服务器，适用于截图、证件扫描件和内部设计图。
Base64 图片的常见用途
data URI 适用于图片足够小、单独请求的开销超过 Base64 带来的约 33% 体积增加的场景。以下三种模式最为常见：
- CSS 内联图标：将 1–2 KB 的图标嵌入样式表作为 background-image: url(data:…)，使规则完全自包含。
- 邮件签名和新闻邮件：将 logo 作为带有 data URI src 的
嵌入，即使客户端阻止远程图片也能正常显示。
- 构建工具内联：Webpack 和 Vite 等打包器会自动将低于字节阈值的资源内联，本工具可预览该输出的实际效果。
Base64 图片是什么样的？
以一张微小的 1×1 透明 PNG 为例。其原始字节仅 67 字节，编码后变为字符串 iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=，完整的 data URI 为 data:image/png;base64,iVBORw0KGgo…。注意编码后的形式比原始体积大约三分之一——这就是将二进制数据安全嵌入文本所付出的代价。
我的图片会上传到任何地方吗？
不会。转换使用浏览器的 File API 和原生 btoa 函数，图片完全在您的设备上编码。您可以自行验证：打开浏览器开发者工具，切换到 Network（网络）面板，然后转换一张图片——您看到的请求只有页面加载和广告相关的内容，没有任何图片数据被发送到服务器，因此处理截图、证件及内部设计图是安全的。
为什么 Base64 输出比原始图片更大？
Base64 将每三个字节的二进制数据表示为四个 ASCII 字符，因此编码后的文本比源文件大约增加 33%。本页面的 data URI 大小读数会显示精确的膨胀长度。这也是 data URI 只适合小图片的原因——将 2 MB 的照片内联会使 HTML 或 CSS 体积远超单独请求的开销。经验法则：4 KB 以下的图片适合内联，更大的图片建议链接引用。
可以转换哪些图片格式？
任何浏览器能识别为图片的格式均可使用，因为本工具读取的是原始字节，而非对图片进行解码。支持的格式包括 PNG、JPEG、GIF、WebP、SVG 和 BMP。MIME 类型直接从文件读取，因此 data: 前缀始终与真实格式匹配——JPEG 生成 data:image/jpeg，SVG 生成 data:image/svg+xml。关于 SVG 的特别说明：SVG 本身是文本格式，因此对于 SVG，URL 编码的 data URI 通常比 Base64 版本更小，但本工具为保持一致性统一输出 Base64 形式。
拖入图片，复制所需的 data URI 或代码片段，粘贴到您的 HTML、CSS 或邮件模板中。每个字节都留在您的设备上。无需上传，无需账户，无需服务器往返。