Base64 图片
Base64 是一种用 64 个可打印字符（A-Z、a-z、0-9、+、/）表示任意二进制数据的编码方式。它广泛应用于 Web 开发中——将小图标直接内嵌到 HTML/CSS 中减少 HTTP 请求、在邮件 HTML 中嵌入图片避免外部链接失效、在 JSON API 中传输二进制文件。这个工具让你在 Base64 字符串和图片文件之间即时互相转换，支持 PNG、JPEG、GIF、WebP 四种格式。
所有图片处理完全在浏览器端完成，使用 Canvas API 和 FileReader——你的图片不会上传到任何服务器。支持拖拽上传、实时预览、一键复制 Base64 data URL。非常适合前端开发者在开发调试时快速获取图片的 Base64 编码。
Base64 → 图片
图片 → Base64
🖼️
点击或拖拽上传图片
PNG / JPG / GIF / WebP
📖 Base64 图片工具使用说明
什么是 Base64？
Base64 是一种将二进制数据编码为 64 个可打印 ASCII 字符（A-Z、a-z、0-9、+、/）的编码方案。每 3 字节（24 bit）原始数据被拆分为 4 个 6-bit 组，每个 6-bit 值对应一个 Base64 字符。如果原始数据不是 3 的倍数，使用 = 号填充。编码后体积增大约 33%，但换来的是可以安全地在文本协议（HTML、CSS、JSON、Email、XML）中传输任意二进制数据。
Base64 Data URL 格式
data:[<MIME type>][;base64],<encoded data>
示例：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
MIME 类型从上传的图片文件自动识别（image/png, image/jpeg 等）
功能说明
- 图片 → Base64：选择图片文件（支持 PNG/JPG/GIF/WebP），自动生成完整的 data:image/...;base64,... Data URL。支持拖拽上传。
- Base64 → 图片：粘贴 Base64 编码字符串（支持纯编码或完整 Data URL 格式），实时预览解码后的图片。自动检测并过滤 data:... 前缀。
- 实时预览：编码或解码后立即看到图片效果，确认转换正确。
- 一键复制：双击结果区域复制完整的 Base64 Data URL，可直接用于 HTML <img src> 或 CSS background-image。
使用方法
- 图片 → Base64：点击或拖拽图片文件到"图片 → Base64"面板，自动生成 Data URL。双击复制。
- Base64 → 图片：在左侧文本框中粘贴 Base64 字符串，右侧实时显示图片预览。支持纯编码和完整 data: URL 两种输入。
- 工具会自动检测输入格式——粘贴纯 Base64 编码或完整的 Data URL 均可正确识别。
Base64 嵌入 HTML 示例
<!-- 图片标签中嵌入 Base64 -->
<img src="data:image/png;base64,iVBOR..."/>
<!-- CSS 背景图中嵌入 Base64 -->
background-image: url(data:image/png;base64,iVBOR...);
使用建议与注意事项
- 适用场景：小图标（< 5KB）、邮件内嵌图片、减少 HTTP 请求。Base64 编码后体积增大约 33%，对小图片来说额外的字节量远小于一次 HTTP 请求的开销。
- 不适用场景：大图片（> 100KB）。Base64 编码后体积更大，且浏览器无法利用缓存——每次 HTML 加载都会重新传输整个图片数据。大图片应使用外部 URL 配合浏览器缓存策略。
- 隐私保证：所有图片处理在浏览器本地完成，使用 Canvas API 和 FileReader，图片文件不会上传到任何服务器。可在浏览器 DevTools 的 Network 面板验证：关闭此页面时网络标签中无任何图片上传请求。
- 格式支持：输入支持 PNG、JPEG、GIF、WebP。对于其他格式（如 BMP、SVG）可能无法正确预览。