文件

图片转 Base64

在浏览器内把 PNG、JPG、WebP、GIF、SVG、AVIF 和 BMP 图片转换成 Base64。输出形式可选 Data URL、纯 Base64、CSS url、HTML img 标签和 Markdown 图片语法。适合把小图标嵌入前端代码、制作 HTML 邮件、测试 API 图片字段，或在文档中内嵌图片。

  • 本地编码常见图片格式，源文件不会上传
  • 同一份结果可在 Data URL、纯 Base64、CSS、HTML 和 Markdown 之间切换
  • 可以一键复制可用结果，也可以导出 TXT，方便交接和留档
  • 拖拽图片后自动转换，并显示状态、字符数和文本大小
  • 适合处理隐私敏感图片，也适合离线环境使用
tools/图片转 Base64
未选择

把图片拖到这里，或点击选择文件

选择图片后，会自动生成 Base64 输出。

包含 data:image 前缀，可直接放进 src 属性或内联 CSS。

未选择
格式
Data URL
字符数
-
文本大小
-
选择图片后，Base64 结果会显示在这里。
命令

功能简介

一个专注的转换流程：导入图片，选择输出形式，复制或导出结果。所有处理都在浏览器内完成。

  1. 01

    支持多种图片格式

    JPEG、PNG、WebP、GIF、SVG、AVIF 和 BMP 都可以按同一流程处理，无需额外配置。

  2. 02

    多种输出形态

    同一份结果可切换为 Data URL、纯 Base64、CSS、HTML 或 Markdown，方便适配不同接入场景。

  3. 03

    状态和大小指标

    可以查看转换状态、字符数和文本大小，方便判断是否适合内联到代码或文档中。

  4. 04

    本地运行

    编码在浏览器内完成。除非你主动复制或导出，文件不会离开当前设备。

  5. 05

    复制和 TXT 导出

    一键复制结果；如果需要可追踪的交付物，也可以下载为 TXT 文件。

  6. 06

    长内容也便于查看

    全屏模式适合检查很长的 Data URL，不会被页面布局打断。

如何使用

推荐流程是：导入图片，选择输出形式，确认结果，然后复制或导出。

  1. 01

    把图片拖到上传区域，或点击选择文件。

  2. 02

    根据结果要使用的位置，选择对应的输出形式。

  3. 03

    等待自动转换完成。输出面板显示已就绪后即可使用。

  4. 04

    在嵌入生产代码前，先检查字符数和文本大小。

  5. 05

    把结果复制到编辑器中，或下载为 TXT 用于交接和留档。

功能说明

围绕图片 Base64 编码、Data URL 生成和内联资源准备的常见工作流设计。

  • 编码在浏览器内执行，源图片不会发送到服务器
  • Data URL 输出可直接用于 src 属性和内联 CSS
  • CSS 模式会返回可用于 background-image 的 url(...) 值
  • HTML 模式会返回完整的 img 标签，适合快速片段使用
  • Markdown 模式会返回适合 README 和内部文档的图片语法
  • 实时显示字符数和文本大小，方便在内联前判断成本
  • 复制按钮可以减少手动拼接前缀和格式出错的概率
  • TXT 导出适合交接、备份和审计留档
  • 无需第三方服务，也能处理隐私敏感图片
  • 适合测试 JSON 字段中携带图片数据的 API payload
  • 可在 Data URL 和纯 Base64 之间快速切换，匹配接收方系统要求
  • 支持全屏查看很长的编码字符串

适合哪些场景

适合小型内联资源、邮件模板、API payload 检查、自包含文档和离线演示。

  1. 内联小图标

    把很小的图片作为 Data URL 嵌入，减少关键路径上的一次网络请求。

  2. HTML 邮件图片

    为外部图片链接可能被拦截或移除的邮件场景，准备 Base64 图片源。

  3. API payload 测试

    把编码后的图片数据放入 JSON 字段，验证后端解码和存储流程。

  4. Markdown 文档

    把图片直接嵌入 README、知识库和内部指南，让文档更容易携带。

  5. 组件演示

    为 sandbox 或离线展示制作包含图片数据的自包含 demo。

  6. 隐私敏感流程

    在本地处理敏感图片，不需要发送给第三方服务。

  7. 临时设计交接

    临时素材托管还没准备好时，可以先把编码后的图片 payload 交给前端。

  8. 少量关键资源调优

    页面整体仍使用静态 URL，只把少数关键小图内联。

延伸阅读

编码生产资源前，建议先用 图片压缩 减少不必要的字节，避免 Base64 文本变得更长。把较长的 Data URL 或纯 payload 粘贴到其他系统后，可以用 Base64 转图片 做一次往返验证。结果如果要放进 HTML 属性、邮件模板或 CMS 源码，再用 HTML 编码解码 检查实体和属性边界，尽早发现截断、MIME 错误或转义损坏。

使用建议

Base64 更适合少量、有明确目的的小型内联资源。对于大图或频繁复用的图片，它通常不是最佳方案。

  • 优先用于小图标、占位图和短期 demo 资源。
  • 大型内容图片更适合继续使用 CDN、lazy loading 和现代图片格式。
  • 把较长的 Data URL 放到关键路径之前，先测量它对 first paint 的影响。
  • 用于 CSS 背景时，尽量保持每个编码资源较小，并关注渲染路径。
  • 把 CSS、HTML 或 Markdown 输出上线前，确认目标环境支持 data URI。
  • API 测试通常更适合使用纯 Base64，把 MIME type 或文件名单独放在其他字段里。
  • 交接用的结果可以保存为 TXT，方便版本管理和审计。
  • 团队最好约定哪些资源允许内联，哪些必须通过静态 URL 分发。

边界与注意事项

Base64 是把二进制转成文本的编码方式，它本身不会让文件变小。

  • Base64 输出通常比源字节大约多三分之一，这部分会直接进入 HTML 或 CSS payload。
  • 非常长的 Data URL 可读性差，也不适合手动维护。
  • 一些旧环境仍可能限制 URL 长度或嵌入资源处理方式，上线前需要测试。
  • 动画 GIF 和高分辨率图片会生成非常长的结果，复制和渲染都可能变慢。
  • 这个工具只负责编码，不会调整图片尺寸，也不会压缩图片。
  • 频繁复用的资源通常更适合使用带 CDN 缓存的静态 URL，而不是很长的内联字符串。

常见问题

这里整理了输出形式、本地处理、支持格式，以及这个工具适合放在哪些流程里的常见问题。

Data URL 和纯 Base64 有什么区别？

Data URL 带有 MIME 前缀，例如 data:image/png;base64,，可以直接用于 src 或 CSS。纯 Base64 只包含编码主体，前缀需要你自己添加，或由接收方系统添加。

为什么编码后的字符串比原文件更大？

Base64 会把二进制数据表示成可打印字符，这一定会增加开销。大约增加三分之一是正常现象。

什么时候适合把图片转成 Base64？

适合内联小图标、在 HTML 邮件里嵌入图片、测试 API payload、自包含文档和离线 demo。它不适合替代大多数内容图片的常规分发方式。

这个工具会把图片上传到服务器吗？

不会。编码在浏览器内完成，文件不会发送给任何第三方。

CSS 或 HTML 输出可以直接用吗？

可以。CSS 模式会返回适合 background-image 的 url(...) 值，HTML 模式会返回完整的 img 标签。

支持哪些图片类型？

支持 JPEG、PNG、WebP、GIF、SVG、AVIF 和 BMP。

为什么大文件复制或预览会变慢？

编码后的输出会比原文件长很多，浏览器在复制、绘制和编辑时需要更多内存和处理时间。

为了 SEO，把所有图片都内联成 Base64 好吗？

不建议。少量关键小图可以内联，但大多数内容图片应该保持可缓存的静态 URL。

可以用于 API 的 JSON 图片字段吗？

可以。通常纯 Base64 更合适，MIME type 或文件名建议放在单独字段里。

Data URL 输出可以放进 CSS background-image 吗？

可以。使用 CSS 模式会生成可直接粘贴到 background-image 的 url(...)。

这和图片压缩器一样吗？

不一样。它只是把图片数据编码成文本，不会改变像素，也不会减小原始文件大小。

什么时候静态 URL 比 Base64 更好？

对于较大的图片，或会在多个页面复用的资源，浏览器或 CDN 可缓存的静态 URL 通常更清晰，也更快。

更多相关工具

可以搭配图片压缩、格式转换、Base64 转图片解码，形成完整的图片处理流程。