Base64 转图片 · 粘贴即预览、一键下载，也能图片转 Base64

Base64 转图片在线工具：把 Base64 粘进来马上预览，带不带 data:image 前缀都行，空白、换行、缺的等号、JSON 里的引号和转义自动处理；按文件头认出 PNG、JPEG、GIF、WEBP、BMP、ICO、AVIF、SVG，显示尺寸和大小，按格式下载。一次粘多段出多张图，Base64 转 PDF 直接下载；图片转 Base64 给出四种写法。全在本机处理，不上传。

怎么用

这是一个 Base64 转图片的在线工具：把一串 Base64 粘进最上面的框，图片马上显示在下面，可以直接下载。不用下载软件、不用注册，全部在你的浏览器里处理，不上传。页面分两个页签：Base64 转图片（默认）和图片转 Base64。

一、Base64 转图片：粘贴即预览

• 直接粘：带 data:image/png;base64, 前缀的 Data URL，或者只有后面那一大串的纯 Base64，都可以。不用点按钮，粘进去就出图。
• 自动清理：空格、换行、全角空格会去掉；末尾缺的等号自动补上并告诉你补了几个；两头的英文引号、反引号、末尾的逗号分号会去掉；JSON 里的 \/ 和 \n 这类转义会还原。
• 不带前缀也能认：本页看数据开头的几个字节（文件头）认格式，认得出 PNG、JPEG、GIF、WEBP、BMP、ICO、AVIF、SVG 和 PDF。前缀里写的类型和文件头对不上时，按文件头处理并提醒你。
• 每张卡片：图片预览，下面一行是格式、像素尺寸和字节数，再下面两个按钮——「下载」（扩展名按认出来的格式起，比如 .png、.jpg）和「复制 Data URL」（规整成类型正确的完整写法）。
• 预览底色：棋盘格（默认，透明的地方一眼看得出）、白、黑三种。白色图标在白底上看不见时切到黑底。

二、一次转多张

把好几段 Base64 一起粘进来就出好几张卡片，每张标着「第几段」。分段的规则：

• 段与段之间空一行；
• 或者几个 data: 连在一起，每个 data: 起一段；
• 从网页源码里复制的 <img src="data:…">、CSS 里的 url(data:…)、接口返回的 JSON 里的 "logo": "data:image\/png;base64,…"，整段粘进来就行，本页会把每个 data: 图片挑出来，夹在中间的标签和字段名自动丢掉。

只按一次回车一般不会切段，因为邮件和很多系统里的 Base64 本来就是每隔几十个字符折一行；不过上一行以等号结尾、或者下一行以 iVBORw0KGgo 这类文件头开头时，会当成新的一段，所以一行一张图连着粘也能分开。

三、Base64 转 PDF

PDF 的 Base64 粘进来，卡片上显示「PDF」和「下载 .pdf」按钮，下载后用浏览器或阅读器打开。本页不在页面里显示 PDF 内容。

四、图片转 Base64

切到「图片转 Base64」，选图片或拖进虚线框，可以一次选多张（最多 20 张）。每张给出四种写法，各带「复制」：

• Data URL：data:image/png;base64,…，能直接放进 src 属性。
• 纯 Base64：不带前缀，接口字段、数据库里常用。
• CSS：background-image: url("…"); 一整行。
• HTML：<img src="…" alt=""> 标签。

单张超过 2 MB 会提示：转出来的字很长，网页里嵌这么大的图会拖慢加载。要嵌进网页的图，先用 图片压缩 压小，或用 图片格式转换 转成更省体积的 WEBP，再回来转 Base64。

怎么看结果

卡片上的读数

• 格式：按文件头认出来的真实格式，不是前缀上写的。
• 像素尺寸：从文件头里读出来的宽 × 高。SVG 读的是它自己写的宽高，没写就读 viewBox；读不出时等图片显示出来后按实际大小补上。
• 大小：解码后真实文件的字节数，大约是你粘进来的 Base64 字符数的四分之三。

黄色和红色的提示

• 末尾自动补了 N 个等号：不影响结果。通常是复制时被截掉了，或者用的是 URL 安全写法。
• 前缀写的是 A，但文件头是 B：生成这段数据的程序把类型写错了，常见的是把 PNG 写成 image/jpeg。浏览器多数时候照样能显示，但存成文件时扩展名要以文件头为准，本页的下载已经按真实格式起名。
• 不是 Base64 里的字符／长度不对／等号只能出现在最末尾：这一段解不开，提示里写了第几个字符。多段一起粘时，解不开的那段单独报错，不影响其他段出图。
• 能解开，但认不出是哪种文件：解出来的不是本页认得的图片或 PDF，可能是别的文件，也可能本来就是文字。是文字的话，去 Base64 编码解码 的「文本」页签解码。

一眼认出是什么格式

不用解码，看 Base64 的开头几个字符就能猜个八九不离十：

常见问题

Base64 图片是什么，什么时候适合嵌进网页？

就是把图片文件的每个字节用 Base64 写成一串字母数字，再加上 data:image/png;base64, 这样的前缀，直接写进网页代码、CSS 或接口数据里，不用单独放一个图片文件。适合几 KB 以内的小图标、小背景：少一次网络请求，代码搬到哪里图都跟着。不适合大图：体积要大三分之一，没法被浏览器单独缓存，每次加载页面都要重新读一遍。

为什么 Base64 解出来的图片比字符串短四分之一？

Base64 每 4 个字符代表 3 个字节，所以解码后的文件大小约等于字符数的四分之三；反过来，图片转成 Base64 会变大约三分之一。一张 30 KB 的图标转出来约 40 K 个字符。原理细节在 Base64 编码解码 页有一步步的例子。

从接口或数据库里取出来的串怎么还原成图片？

接口返回的 JSON 里，图片字段的值常常带引号，斜杠被写成 \/，有的还带 \n；数据库里的字段可能是纯 Base64，也可能带 data: 前缀。不管哪种，把那个字段的值（连引号一起也行）复制过来粘进本页就能出图。如果整段 JSON 太乱找不到字段，先用 JSON 在线解析 格式化。要是取出来的是一段十六进制（89504E47… 这种），那不是 Base64，需要先换算成字节。

二维码图片也能转吗？

能。用 二维码生成 做好图并下载，再到「图片转 Base64」页签转成 Data URL，就能直接嵌进网页或邮件模板里。

原理与冷知识

文件头：文件自己报的「身份证」

几乎每种文件格式开头都有几个固定的字节，叫文件头或魔数。PNG 开头是 8 个字节 89 50 4E 47 0D 0A 1A 0A，其中 50 4E 47 就是字母 PNG；JPEG 以 FF D8 FF 开头；GIF 开头直接写着 GIF89a 或 GIF87a；PDF 开头是 %PDF-。本页认格式只看这几个字节，所以文件名、前缀写错都骗不过它。像素尺寸也写在文件开头附近：PNG 在第 17～24 个字节，GIF 在第 7～10 个字节，JPEG 要往后找到叫 SOF 的段才读得到。

开头那几个字符为什么固定

Base64 每 3 个字节编成 4 个字符，前面的字节一样，编出来的前几个字符就一样。PNG 的 8 字节文件头编出来总是 iVBORw0KGgo，PDF 的 %PDF- 总是编成 JVBERi0。这就是上面那张「一眼认格式」表的原理。

Data URL 的来历

data: 这种把内容直接写进链接的写法在 1998 年由 RFC 2397 规定，格式是 data:类型;base64,内容。它最早是为了在网页里内嵌小图片，后来被广泛用在 CSS 图标、邮件模板和接口数据里。因为它能把任何内容装进一个链接，主流浏览器出于安全考虑，会拦下网页把整个页面跳转到 data: 链接的操作，但在 <img> 里显示 data: 图片不受影响。