Toolonit
  1. 首页
  2. 图片
  3. 图片转 Base64

图片转 Base64 工具

将图片转换为 data: URI 字符串。

拖放图片到此处或点击选择

JPG、PNG、WebP、GIF、BMP、ICO、SVG 或 AVIF。 文件仅在浏览器中处理,不会上传。 图片会保存在此浏览器中,直到被移除。

Ctrl+O选择Ctrl+V粘贴

把图片变成可以直接放进 HTML、CSS、JSON 或 Markdown 的文本。拖入一张或多张图片,即可得到每张图片的 data URI、原始 Base64、CSS 背景规则、HTML <img> 标签和 Markdown 图片语法,每一项都只需点一下就能复制到剪贴板。文件由浏览器读取,不会离开你的设备;免费,无需注册。

如何把图片转换为 Base64

  1. 把图片拖到页面任意位置,用 Ctrl+V 粘贴,或点击选择文件。在其他任何图片工具中添加的图片已经按当前状态出现在这里:在那里调整尺寸或裁剪并应用过的图片,得到的就是编辑后图片的 Data URI。没有文件的话,也可以用示例图片试一试。
  2. 点图片下方的“Data URI”、“Base64”、“CSS”、“HTML”或“Markdown”,复制相应的代码片段。按 Ctrl+C 可复制所选图片的 data URI。
  3. 把它粘贴到需要的地方,或下载为文本文件。有多张图片时,点“全部下载(ZIP)”可一次全部保存。

功能

  • 每张图片五种代码片段:data URI、原始 Base64、CSS background-image、HTML <img> 和 Markdown
  • HTML 标签包含宽度、高度,以及取自文件名的 alt 文本
  • 一键复制;按 Ctrl+C 复制所选图片的 data URI
  • 可同时处理多张图片,每张图片生成一个 .txt 文件,或全部打包成一个 ZIP
  • 图片超过 100 KB 时会提醒你,这种情况通常直接链接文件更好
  • 支持 PNG、JPG、GIF、WebP、SVG、AVIF、BMP 和 ICO,即使浏览器没有提供 MIME 类型,也能给出正确的类型

隐私安全吗?

是的。浏览器读取文件并在页面上完成转换;不会向任何地方发送任何内容,图片会一直保留在这个浏览器中,直到移除为止。Data URI 就是文件本身,所以会连同照片的元数据一起带上:如果有 GPS 位置或其他元数据,工具会提示你,并指引你先用 EXIF 查看器删除。

常见问题

什么时候应该使用 data URI?

适合图标、logo 和小背景图这类小图片,可以省去一次单独的请求;也适合无法放置文件的场合:HTML 邮件、单文件页面、JSON 字段或 Markdown 文档。大尺寸照片则应链接文件,这样浏览器可以缓存。

Base64 会让文件变大多少?

大约大三分之一。Base64 每 3 个字节用 4 个字符表示,所以 30 KB 的图片会变成约 40 KB 的文本。超过约 100 KB 时,通常链接文件更好,工具也会提醒你。

应该复制哪种代码片段?

自己编写 src 或 url() 时用 Data URI,要现成的 background-image 规则用 CSS,要带宽度、高度和 alt 文本的完整 <img> 标签用 HTML,写文档用 Markdown,API 或 JSON 字段只需要编码后的数据时用 Base64。

可以同时转换多张图片吗?

可以。想添加多少张都行;每张图片都有自己的代码片段,点“全部下载(ZIP)”会为每张图片保存一个文本文件。

相关工具