图片转 Base64

什么是图片转 Base64？

将图片文件转换为 Base64 编码的字符串，使得图片数据可以直接嵌入到 HTML、CSS 或 JavaScript 中，无需额外的 HTTP 请求。编码后的字符串以 data:image/png;base64,iVBOR... 格式呈现，称为 Data URI。

工作原理

上传的图片通过 Canvas API 在浏览器端进行读取和重绘。您可以通过调整 质量滑块（JPEG/WEBP）来控制图片压缩程度，通过 缩放滑块 改变输出尺寸，或选择不同的输出格式。所有处理均在浏览器本地完成，图片数据不会上传到任何服务器。

4 种输出格式

• 纯 Base64 — 仅包含 Base64 编码字符串（不含 Data URI 前缀）
• Data URI — 完整的 data:image/...;base64,... 格式
• HTML <img> 标签 — 可直接在 HTML 中使用的 <img src="..."> 代码
• CSS background — 可直接在 CSS 中使用的 background-image: url(...) 代码

使用场景

• 在 HTML 邮件中嵌入小图标/Logo，避免外部图片被拦截
• 将小尺寸图片（如图标、按钮背景）直接嵌入 CSS 中，减少 HTTP 请求
• 在代码沙箱（如 CodePen、JSFiddle）中直接使用图片，无需托管
• 在 JSON API 中传输小图片数据
• 在 Markdown 中使用 Base64 嵌入截图（适用于不支持外部图片的环境）

使用示例

HTML <img> 标签

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="embedded image">

CSS background-image

.element {
  background-image: url('data:image/png;base64,iVBORw0KGgoAA...');
  background-size: cover;
}