Question 1

什么是 Base64 图片？为什么要使用它？

Accepted Answer

Base64 图片是将图片文件转为 Base64 编码字符串。这样可以将图片作为文本嵌入到 HTML、CSS、JSON 中，而无需单独的图片文件。常见用途包括:

在 HTML/CSS 中嵌入小图以减少 HTTP 请求

在 JSON API 响应中包含图片

在 SVG 文件中嵌入图片

为 Web 应用生成数据 URI

在不支持二进制的数据库中存储图片

虽然 Base64 编码会使文件体积增加约 33%，但对小图标来说，减少请求和简化部署的好处往往更大。

Question 2

如何在 HTML、CSS 和 JavaScript 中使用 Base64 图片？

Accepted Answer

Base64 图片可在多种 Web 技术中使用:
HTML:
CSS: background-image: url('data:image/jpeg;base64,ABC123...');
JavaScript: const img = new Image(); img.src = 'data:image/png;base64,ABC123...';
格式始终为 data:[MIME type];base64,[编码数据]。对小图片能提高加载性能，但大图片更适合传统文件引用。

Question 3

使用 Base64 图片的优缺点是什么？

Accepted Answer

优点:

减少 HTTP 请求，加快加载

文件更少，部署更简单

可嵌入 JSON 等文本格式

内联图像，无跨域问题

更新代码时缓存同步

缺点:

文件体积增大约 33%

浏览器无法单独缓存图片

HTML/CSS 文件体积变大

内嵌图片更新不便

大图片可能造成性能问题

适合小图标和 UI 元素，大图片推荐使用传统方式。

Question 4

哪些图片格式可以转换为 Base64？

Accepted Answer

任何图片都能转换为 Base64，常用格式包括:

PNG（透明图/标志最佳）

JPEG（适合照片）

SVG（矢量图，缩放无损）

GIF（简单动画）

WebP（现代高压缩格式）

ICO（网站图标）

转换时需在 data URI 中指定正确 MIME 类型（如 data:image/png;base64,）。工具会自动识别。

Question 5

Base64 图片有大小限制吗？

Accepted Answer

无硬性技术限制，但存在实际问题:

文件体积增加约 33%

字符串过长会导致浏览器性能下降

部分浏览器限制 CSS data URI 长度

大图嵌入会增加 HTML/CSS 体积，影响加载速度

建议仅用于 10KB 以下的小图标/简单图形。大图片推荐通过 HTTP/HTTPS 方式加载，并利用缓存。

Base64 图片转换器 – 图片与 Base64 互转

常见问题

相关工具

颜色模型转换器 – 在 HEX、RGB、HSL、HSV、OKLCH、OKLAB 之间转换

Base64编码器/解码器 – 转换文本和二进制数据

正则表达式测试器 – 测试与调试 Regex