Base64 图像编码器 |免费在线将图像转换为 Base64

如何使用

如何使用Base64 图像编码器

使用案例

概述

将图像编码为 Base64 可以将网络请求换成更大的文件。这对于小型、频繁使用的资产（图标、微小徽标、间隔图形）来说是一个胜利，在这些资产中，往返延迟的成本高于额外字节的成本。对于大照片，请将它们保存为单独的文件。

数据 URI 只是一个以 data:image/png;base64, 开头的字符串。将其放入 CSS 背景图像或 HTML img src 中，浏览器会内联呈现它。该工具会生成两个片段，以便您可以直接粘贴正确的片段。

Base64 编码使文件大小增加大约 33%，因为它表示文本中的二进制数据。内联还意味着资产不能跨页面单独缓存。有意将其用于小型的、页面关键的图形，而不是所有内容。

特征

常问问题

如何在线将图像转换为 Base64？+

拖放您的图像（JPG、PNG、SVG、WEBP）或单击上传。该工具会立即生成 Base64 字符串，可用作 CSS 或 HTML 中的数据 URI。

什么时候应该在 CSS 中使用 Base64 图像？+

对图标、徽标和 UI 元素（5KB 以下）等小图像使用 Base64 编码。这消除了对这些资产的 HTTP 请求，从而可以稍微提高性能。对于大图像，外部 URL 更好。

如何在 CSS 中使用 Base64 图像？+

将其用作背景图像：background-image: url('data:image/png;base64,iVBORw0KGgo...');该工具会自动生成可供复制的 CSS 片段。

如何在 HTML 中使用 Base64 图像？+

将其用作 img 标签的 src 属性：<img src='data:image/png;base64,iVBORw0KGgo...'/>。该工具会为您生成此 HTML 片段。

Base64编码会使图像变大吗？+

是的。与二进制原始文件相比，Base64 编码使文件大小增加了约 33%。这是一个权衡——你保存了一个 HTTP 请求，但数据更大。对于非常小的图像来说这是值得的，但对于大照片则不值得。

我可以将 Base64 字符串解码回图像文件吗？+

是的。切换到解码模式，粘贴 Base64 字符串（带或不带 data:image/... 前缀），该工具将渲染图像并让您将其下载为文件。这对于从 HTML 源代码或 API 负载中提取嵌入图像非常有用。

Base64 会使图像变大吗？+

是的，大约三分之一，因为二进制表示为文本。这就是为什么它最适合小型资产，因为避免请求比规模更重要。

我的图片是否已上传以对其进行编码？+

不会。编码和解码完全在您的浏览器中进行。