Base64图片编码器

将图片编码为 Base64 Data URI，用于 HTML 和 CSS

将图片拖放到此处或点击上传

支持 PNG、JPG、SVG、WebP、GIF、AVIF

也可以试试：Base64编码器 Base64解码器 Base64 Image Decoder Base64 URL-safe Base64转Hex Base64 File Encoder

什么是 Base64 图片编码？

Base64 图片编码将二进制图片数据转换为 ASCII 字符串，可直接嵌入 HTML、CSS 或 JSON，无需引用外部文件。结果是一个 data URI——一个以 data:image/png;base64, 开头、后接图片 Base64 编码字节的自包含字符串。浏览器处理 data URI 的方式与外部图片 URL 完全相同：解码 Base64 内容并内联渲染图片。

该技术由 RFC 2397（data URI 方案）和 RFC 4648（Base64 编码）定义。图片经 Base64 编码后，每 3 个字节的二进制像素数据转换为 4 个 ASCII 字符，体积增加约 33%。尽管存在这一开销，内联图片可消除每个资源的 HTTP 请求——对于小型图片（图标、Logo、1×1 追踪像素）而言，单次请求的往返延迟往往超过额外字节的代价，因此这是一项有意义的优化。

所有现代浏览器、电子邮件客户端（有一定限制）以及任何支持标准 URI 语法的环境均支持 data URI。它广泛应用于单页应用、HTML 邮件模板、SVG 精灵图以及 CSS background-image 声明中，通过减少网络请求总数来改善感知加载速度。

为什么使用这个 Base64 图片编码器？

本工具可直接在浏览器中将任意图片转换为可即用的 data URI——无需上传、无需服务器、无需账号。

⚡

即时转换

拖放图片或选择文件，完整的 data URI 立即生成。无需等待服务器处理——FileReader API 在本地完成全部操作。

🔒

隐私优先处理

您的图片不会离开设备。编码完全在浏览器中通过原生 FileReader.readAsDataURL() 方法运行，不向任何服务器传输数据。

🌐

支持所有主流格式

支持 PNG、JPEG、SVG、WebP、GIF、ICO、BMP 以及浏览器支持的任何其他图片格式。MIME 类型自动从文件中检测。

📦

输出即可粘贴使用

输出为完整的 data URI 字符串——可直接粘贴到 HTML img 的 src 属性、CSS 的 url() 声明或 JSON 载荷中，无需任何手动格式化。

Base64 图片编码使用场景

前端开发

将小型图标和 UI 资源直接嵌入 HTML 或 CSS，消除 HTTP 请求，减少关键首屏图片的瀑布延迟，改善最大内容绘制（LCP）评分。

HTML 邮件模板

许多邮件客户端默认屏蔽外部图片。内联 Base64 图片无需收件人点击「加载图片」即可立即显示，提升打开率和视觉一致性。

单页应用

将小型资源作为 data URI 打包进 JavaScript 或 CSS，减少网络请求总数。Webpack 和 Vite 均支持对低于可配置阈值的资源自动进行 Base64 内联。

API 与 JSON 载荷

将用户头像、签名或缩略图编码为 Base64 字符串，直接包含在 JSON API 响应中，避免为小型图片单独搭建文件托管端点。

文档与 Markdown

将示意图或截图作为 data URI 嵌入 Markdown 文件或 README 文档中。图片随文档一起传递，无需外部托管即可正确显示。

测试与原型开发

在测试夹具、Storybook 故事或原型 HTML 文件中使用 Base64 data URI 作为占位图片，无需在早期开发阶段搭建静态文件服务器或管理图片资源。

Data URI 结构

data URI 将图片格式和二进制内容编码在一个字符串中。了解其结构有助于以编程方式构建或解析 data URI：

组成部分	说明
data:	URI scheme identifier
image/png	MIME type of the image
;base64,	Encoding declaration
iVBORw0KGgo...	Base64-encoded binary data

Base64 编码图片格式对比

图片格式的选择会影响 Base64 输出大小、浏览器支持和渲染特性。请根据内容类型选择最合适的格式：

格式	MIME 类型	透明度	适用场景
PNG	image/png	Yes	Screenshots, icons, UI elements
JPEG	image/jpeg	No	Photos, gradients, large images
SVG	image/svg+xml	Yes	Logos, icons, scalable graphics
WebP	image/webp	Yes	Modern web images, smaller files
GIF	image/gif	Yes (1-bit)	Simple animations, small icons
ICO	image/x-icon	Yes	Favicons

代码示例

如何在主流语言和环境中将图片转换为 Base64 data URI：

JavaScript (browser)

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

Python

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

Node.js

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

CLI (bash)

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

常见问题

Base64 编码的图片最大支持多大？

Base64 规范本身没有硬性限制。浏览器对 data URI 的支持各有差异：大多数现代浏览器可处理数兆字节的 data URI。但 Base64 编码会使体积增加 33%，1 MB 的图片编码后约为 1.33 MB 的文本。对于大于 10–20 KB 的图片，以独立文件配合适当缓存提供服务更为高效。

Base64 编码会降低图片质量吗？

不会。Base64 是无损编码——它将二进制数据转换为文本而不改变内容，解码后的数据与原始文件完全一致（逐字节相同）。任何质量损失来自图片格式本身（如 JPEG 压缩），而非 Base64 编码。

为什么 Base64 编码后的输出比原始图片大？

Base64 用 4 个 ASCII 字符表示 3 个字节的二进制数据，体积增加 33%。data URI 还会添加约 25–30 个字符的前缀（如 data:image/png;base64,）。对于小图片（2–5 KB 以下），消除 HTTP 请求所节省的开销可抵消这一体积增加。对于较大的图片，体积代价使外部文件更为高效。

Base64 图片可以用于 CSS background-image 吗？

可以。将 data URI 作为 url() 函数的值使用：background-image: url('data:image/png;base64,...')。所有现代浏览器均支持此用法。最适合用于小型、频繁使用的背景图案或图标，此时避免 HTTP 请求的收益足以抵消 CSS 文件略微增大的代价。

Base64 图片编码对敏感图片安全吗？

Base64 是编码，不是加密。任何看到 data URI 的人都可以将其解码还原为原始图片。请勿依赖 Base64 来保护机密图片。本工具完全在浏览器中处理图片，不向任何服务器发送数据，但生成的 data URI 是纯文本，任何能访问您 HTML 或 CSS 源码的人都可以读取。

如何将 Base64 data URI 还原为图片文件？

在 JavaScript 中，使用 fetch() 传入 data URI，对响应调用 blob()，然后创建下载链接。在 Python 中，以逗号分割字符串，用 base64.b64decode() 解码 Base64 部分，再将字节写入文件。您也可以使用本站的 Base64 图片解码器工具。

应该对网站上所有图片都进行 Base64 编码吗？

不应该。Base64 内联适合小型图片（图标、Logo、1×1 像素），此时 HTTP 请求的开销超过 33% 的体积代价。对于较大的图片，应以独立文件配合适当缓存头提供服务——浏览器可独立缓存并并行加载它们。常见阈值为 2–8 KB：低于此大小的图片适合内联，较大的图片应作为外部文件提供。