轻工具

图片转 Base64

把图片转换为 Base64 / Data URI，便于直接嵌入 HTML 的 img 标签与 CSS 背景，一键复制，全程本地处理。

点击选择或将图片拖拽到这里 支持 PNG、JPG、WebP、GIF 等，单文件不超过 30MB

使用说明

  1. 将图片拖入虚线框，或点击虚线框从本地选择文件，支持 PNG、JPG、WebP、GIF 等常见格式。
  2. 工具会自动把图片转换为 Data URI 字符串，例如 data:image/png;base64,……。
  3. 在「输出内容」中选择完整 Data URI，或仅保留 Base64 内容（去掉 data: 前缀）。
  4. 点击结果区右上角「复制」按钮即可复制到剪贴板，也可以点击「下载为 .txt」保存文本文件。

常见问题

Data URI 可以直接用在哪里？
最常见的用法是填入 HTML 的 img 标签的 src 属性，或 CSS 的 background-image: url(...)，适合小图标、签名图等无需额外请求的场景。
为什么我的图片转出来特别长？
Base64 会把二进制数据用文本表示，长度约为原文件的 1.37 倍，因此大图转出的字符串很长。嵌入页面时建议只对几十 KB 以内的小图使用。
仅 Base64 模式是什么意思？
完整 Data URI 形如 data:image/png;base64,AAAA...，其中 data:image/png;base64, 是前缀。切换为「仅 Base64」会去掉此前缀，只保留逗号后的编码内容，方便自行拼接。
我的图片会上传到服务器吗？
不会。转换完全在浏览器本地完成，图片与生成的字符串都不会离开您的设备。

使用步骤

  1. 把图片放入虚线框

    点击或拖拽把图片放入虚线框，PNG、JPG、WebP、GIF 等常见格式均可。文件载入后转换自动完成。

  2. 选择输出内容模式

    输出内容有两种模式。完整 Data URI 可直接用于 img 的 src 或 CSS 背景；仅 Base64 则去掉前缀，便于自行拼接。

  3. 查看结果长度信息

    结果区显示文件大小、结果长度（字符）与前缀内容。Base64 编码后约为原文件的 1.37 倍，可据此评估是否过大。

  4. 复制或下载字符串

    点击结果框右上角的复制按钮一键复制，或用下载为 txt 按钮把字符串存成文本文件留作备用。

  5. 粘贴到代码里使用

    把完整 Data URI 粘贴进 img 的 src 属性或 CSS 背景地址，即可直接显示。小图标、占位图与签名图最适合这样内联。

工具详细介绍

Base64 把二进制数据表示成纯文本：图片字节被重新分组，映射为 64 个安全字符，结果比原文件大约 1.37 倍。加上 data:image/png;base64, 这样的前缀就成了 Data URI。图片以内联字符串嵌进 HTML 或 CSS，省掉一次网络请求，也不依赖图床。本工具全部在浏览器本地完成编码，图片不会上传。

最常用的场景是几 KB 到几十 KB 的小图：邮件签名、按钮小图标、骨架屏占位图。内联后能减少请求数、加快首屏渲染，也适合离线页面或单文件演示携带图片。大图内联会让 HTML 与 CSS 明显膨胀，还会使缓存失效。几十 KB 以上的图片仍建议用外链文件引用。

原理与背景

1.37 倍这个数字可以精确解释。Base64 把每 3 个字节重排成 4 个字符，每个字符携带 6 比特，体积先膨胀到 4/3 ≈ 1.333 倍。加上 data: 前缀与末尾补位等号，实际约 1.37 倍。编码是无损的，只换写法不做压缩，原图字节都能还原。字符表只有大小写字母、数字、加号与斜杠，全部是各协议层都不会篡改的安全字符。这类字符串可以放心放进 HTML 属性、CSS 值甚至 JSON 字段里直接传输。

内联与外链真正的差别在缓存。外链图片是独立请求，能被浏览器单独缓存并跨页面复用；内联字符串焊在文档里，页面每次加载都随文档重新下载。经验法则是几 KB 的关键小图内联，几十 KB 以上或反复出现的图走外链。骨架屏占位图、小图标和邮件签名都落在这个区间。HTTP/2 降低了请求成本，缓存逻辑没有变，全页内联会让页面越改越慢，改动一个图标就得重新下发整份文档。

典型使用场景

  1. 给骨架屏内联模糊占位

    把缩到二十像素宽的模糊小图转成 Data URI 写进页面，真实图片加载前先显示色块占位。网络再差也几乎瞬时出现，主流产品的模糊加载就是这样实现的。

  2. 小面积背景纹理与噪点

    几十字节的重复渐变与噪点纹理内联进 CSS，省一次请求也免掉一个容易写错的路径。纹理本身体积小，膨胀 1.37 倍后在样式表里仍可忽略。

  3. 地址栏直接预览验证

    把 Data URI 粘进浏览器地址栏回车，图片立刻显示，不起本地服务器就能确认编码完好。排查复制粘贴中字符串损坏的问题时，这一招最快。

使用技巧

  • 只需要编码体时切换到仅 Base64 模式，省去手动删前缀的麻烦。
  • 内联前先压缩图片，几 KB 的图标远比几十 KB 的截图更适合 Base64。
  • Data URI 字符串很长，粘贴进编辑器时注意别被自动换行截断。

注意事项

  • Base64 并非加密

    任何人拿到字符串都能立刻还原出图片，放进页面等于公开发布。含敏感内容的截图不要以为转成 Base64 就安全了，需要控制的素材仍要走鉴权链路。

  • MIME 前缀要与内容一致

    data:image/png 开头的串装着 JPEG 字节时，多数浏览器靠嗅探仍能显示。校验严格的解析器会直接拒绝，前缀由工具按实际格式生成，手工拼接别写错。

  • CSP 拦截内联图片

    站点设置了 img-src 或 style-src 白名单时，data: 协议不在名单里就会被策略拦下。图片显示为裂图，需要内联就请管理员在策略里显式加入 data:。

相关工具