Base64 图像预览与解码器
指导
Base64 图像预览与解码器
粘贴一个经过base64编码的图像字符串，即可立即预览渲染后的图像，格式将从文件的魔数字节中自动检测。解码后的图像、其像素尺寸以及解码后的字节数量都会在您的浏览器中计算出来——无需上传服务器，无需等待API响应。可选 data: URI前缀会自动剥离，因此您可以直接粘贴来自JSON数据、CSS背景、电子邮件源或生成的SDK响应中的原始base64字符串，它将立即生效。
如何使用
- 复制base64字符串。它可以是原始数据，也可以包含
data:image/...;base64,URI前缀——两种形式均被接受。 - 将其粘贴到 Base64 字符串 字段中。工具在您停止输入后立即解码并预览图像。
- 检查检测到的格式、像素尺寸、解码后的字节数以及原始base64字符数量。
- 点击 下载图片 点击
特征
- 自动检测图像格式 – 从魔数字节中识别出PNG、JPEG、GIF、WebP、BMP、ICO、SVG、AVIF和HEIC，而不仅依赖数据URI提示。
- 像素尺寸 – 宽度和高度从渲染图像中读取，因此您可以看到真实的固有尺寸。
- 解码文件大小 – 显示解码后的实际二进制字节数，同时提供base64字符长度进行对比。
- 剥离数据URI前缀 – 无论输入是否以
data:image/png;base64,开头，只需iVBORw0...，或URL安全的base64变体，均可正常工作。 - 下载为图像文件 – 一键保存解码后的字节，并使用检测到的格式的正确扩展名。
- 纯客户端运行 – base64字符串永远不会离开您的浏览器。可用于私密截图、内部资产或敏感设计文件。
何时使用此工具
每当您遇到一个base64图像字符串并需要确认其实际内容时，请使用此工具——例如调试API响应中嵌入的缩略图、检查CSS或HTML邮件中内联的图像、逆向工程跟踪像素、验证图像生成API的输出，或从数据库导出中恢复资产。由于渲染过程在浏览器中完成，因此它也是在将base64数据投入生产前快速验证其格式是否正确的一种便捷方式。
常问问题
-
什么是base64编码，以及为何用于图像？
Base64是一种将任意二进制数据表示为64个可打印ASCII字符的编码方案。它存在是因为许多传输通道——如JSON、HTML属性、邮件正文、URL、经典XML——无法安全地传输原始字节。将图像编码为base64使其能够在纯文本环境中嵌入整个文件，但会增加约三分之一的大小。
-
HTML和CSS中的数据URI是如何工作的？
数据URI遵循
data:[mediatype][;base64],<payload>格式。当浏览器在img src中看到此内容时，它不会发起网络请求——而是解码内联数据并将其作为资源处理。这避免了往返请求，但会使周围的HTML或CSS变大且无法单独缓存。background-image为何base64编码的图像数据比原始二进制数据更大？ -
Base64将每三个字节的二进制数据打包成四个ASCII字符，仅此一项就导致了33%大小的增加。填充字符和任何换行符都会略微增加这一开销。作为粗略规则，在排除HTTP层压缩后，base64字符串的大小大约是原始文件的1.37倍。
哪些图像格式可以使用base64编码？
-
任何图像格式都可以被编码——base64是格式无关的，它只是简单地表示文件的字节。浏览器可以从数据URI中渲染PNG、JPEG、GIF、WebP、BMP、ICO、SVG，以及越来越多的AVIF和HEIC，前提是前缀中声明了正确的媒体类型或从文件的魔数字节中检测到。
在什么情况下内联base64图像反而会损害性能而不是提升？
-
对于小型图像，内联在关键路径上是高效的，但对于较大文件则不再有益。base64数据无法与包含它的文档独立缓存，会阻塞周围内容的流式传输，并且在每次页面加载时都强制浏览器重新解析相同的字节。对于超过几KB的文件，使用常规
请求并配合HTTP缓存几乎总是更快。
<img>粘贴一个base64编码的图像（带或不带data: URI前缀）
