> 编码 | 嵌入 | 优化 <
// 将图片转换为Base64字符串，用于Web开发和数据嵌入
将图片拖放到此处或点击选择
点击浏览文件
本地处理
100%客户端图片编码。您的文件永远不会离开浏览器。
拖放上传
通过拖放界面快速上传。瞬间Base64转换。
无限制
编码任意大小或格式的图片。无需注册或API密钥。
// 常见问题
问：什么是图片转Base64编码？
答：图片转Base64编码是使用Base64编码将二进制图片数据转换为文本字符串的过程。对于直接在HTML、CSS、邮件或API中嵌入图片而无需单独文件至关重要。
问：图片转Base64转换有多安全？
答：100%安全的本地处理。所有图片编码都在您的浏览器中进行。零服务器上传。您的图片永远不会离开设备。
问：支持哪些图片格式？
答：支持所有常见Web图片格式：PNG、JPEG、GIF、WebP、SVG、BMP等。保持原始图片质量和格式。
问：如何在HTML中使用Base64图片？
答：使用数据URI格式：<img src="data:image/png;base64,YOUR_BASE64_STRING">。非常适合内联图片、图标或减少HTTP请求。
问：有文件大小限制吗？
答：没有服务器端限制。处理在您的浏览器本地进行。大文件可能需要更长时间编码但可以正常工作。
问：PNG 图片怎么转 Base64？
答：把 .png 文件拖进上传区或点击选择文件即可，输出会是 data:image/png;base64,iVBORw0KGgo… 的 Data URI。PNG 支持 alpha 透明通道，适合 Logo、图标和带文字的截图。在浏览器里用代码转换：const reader = new FileReader(); reader.readAsDataURL(pngFile); reader.onload = () => console.log(reader.result);。
问：JPG / JPEG 图片怎么编码成 Base64？
答：操作和 PNG 完全一致：拖入 .jpg 或 .jpeg 文件即可。MIME 前缀永远是 data:image/jpeg;base64,…（IANA 标准中并不存在 image/jpg）。JPEG 是有损压缩，适合照片，通常生成的 Base64 字符串比同分辨率的 PNG 短 40%–60%。
问：动态 GIF 可以转 Base64 吗？
答：可以。把 GIF 编码成 Base64 后得到 data:image/gif;base64,R0lGODlh…，直接放进 <img src="…"> 仍然可以循环播放所有帧。不过每次 HTML / CSS 请求都会带上完整字符串，超过 200 KB 的动画更适合走外链文件，或改用 <video autoplay muted loop> + WebM。
问：WebP 图片怎么转 Base64？
答：上传 .webp 文件即可得到 data:image/webp;base64,UklGRh…。同等画质下 WebP 比 PNG / JPEG 小 25%–34%，因此 Base64 字符串也更短。Chrome、Edge、Firefox、Safari 16+ 等现代浏览器都能识别 image/webp 的 Data URI。
问：SVG 怎么转 Base64？
答：SVG 本身是 XML 文本，有两种常见写法：
1. Base64：data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…，兼容性最好。
2. URL 编码：data:image/svg+xml;utf8,<svg xmlns=…>，更短、可读性更高，特别适合 CSS。
写进 CSS 时优先使用 utf8 版本，并把 # 转义成 %23；用于 <img> 两种都可以。
问：Base64 图片哪种格式最合适？
答：按内容选择：
• Logo / 图标 / 带文字截图 → PNG（无损 + 透明）。
• 照片 → JPEG（体积更小）。
• 矢量图标 → SVG（可缩放、字节最少）。
• 现代项目 → WebP 或 AVIF（压缩最好）。
Base64 固定会放大约 33%，所以尽量从体积最小的原图开始编码。
问：CSS 中怎么用 Base64 图片？
答：写进 background-image 即可：.logo { background-image: url('data:image/png;base64,iVBORw0…'); }
非常适合小于 2 KB 的图标，可以节省一次 HTTP 请求。不过 Base64 图片无法通过独立 URL 被浏览器缓存，一旦修改就会让整份样式表缓存失效；大图建议仍用外链文件。
问：怎么把 Base64 图片写进 JSON 或 API 响应？
答：Base64 本身就是纯 ASCII，可以直接塞进 JSON 字符串：{ "avatar": "data:image/png;base64,iVBORw0KGgo…" }
这是 REST、GraphQL、WebSocket、SSE 场景里传输生成图片的最常用方式，完全无需处理 multipart/form-data。记住体积会比二进制大约 33%，必要时在服务器启用 gzip / brotli 压缩。
问：在 JavaScript（浏览器）中怎么把图片转成 Base64？
答：用 FileReader：
const file = input.files[0];
const reader = new FileReader();
reader.onload = () => {
const dataUri = reader.result; // data:image/png;base64,…
const base64 = dataUri.split(',')[1]; // 只要 Base64 部分
};
reader.readAsDataURL(file);问：Node.js / Python 里怎么把图片转成 Base64？
答：
Node.js：const b64 = fs.readFileSync('img.png').toString('base64');，需要 Data URI 时手动拼 data:image/png;base64,。
Python：import base64; b64 = base64.b64encode(open('img.png','rb').read()).decode()。
PHP：base64_encode(file_get_contents('img.png'))。
Shell：base64 -w 0 img.png（macOS 下用 base64 -i img.png）。
问：为什么 Base64 图片比原始文件大这么多？
答：Base64 用 4 个 ASCII 字符表示 3 个字节的二进制数据，因此体积固定增加约 33%。90 KB 的 PNG 编码后大约是 120 KB 的字符串。不过 Base64 文本的熵很低，在开启 gzip / brotli 的服务器上传输时额外开销会降到 ~5%。如果想真正减小编码前的体积，先用 TinyPNG、cwebp、svgo 等工具优化原图。