Html 用base64编码图像有什么作用？

What is the effect of encoding an image in base64?

提问by Danny Fox

If I convert an image (jpg or png) to base64, then will it be bigger, or will it have the same size? How much greater will it be?

如果我将图像（jpg 或 png）转换为 base64，那么它会更大，还是大小相同？会大多少？

Is it recommended to use base64 encoded images on my website?

是否建议在我的网站上使用 base64 编码的图像？

回答by Blender

It will be approximately 37% larger:

它将大约大 37%：

Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size

粗略地说，Base64 编码的二进制数据的最终大小等于原始数据大小的 1.37 倍

Source: http://en.wikipedia.org/wiki/Base64

来源：http: //en.wikipedia.org/wiki/Base64

回答by bulldog

Here's a really helpful overview of when to base64 encode and when not toby David Calhoun.

这是 David Calhoun对何时进行 base64 编码以及何时不进行编码的非常有用的概述。

Basic answer= gzipped base64 encoded files will be roughly comparable in file size to standard binary (jpg/png). Gzip'd binary files will have a smaller file size.

基本答案= gzip 压缩的 base64 编码文件的文件大小与标准二进制文件 (jpg/png) 大致相当。Gzip 压缩的二进制文件将具有较小的文件大小。

Takeaway= There's some advantage to encoding and gzipping your UI icons, etc, but unwise to do this for larger images.

外卖= 对 UI 图标等进行编码和 gzip 压缩有一些优势，但对较大的图像执行此操作是不明智的。

回答by Eric J.

It will be bigger in base64.

它在 base64 中会更大。

Base64 uses 6 bits per byte to encode data, whereas binary uses 8 bits per byte. Also, there is a little padding overhead with Base64. Not all bits are used with Base64 because it was developed in the first place to encode binary data on systems that can only correctly process non-binary data.

Base64 使用每字节 6 位来编码数据，而二进制使用每字节 8 位。此外，Base64 有一些填充开销。并非所有位都与 Base64 一起使用，因为它最初是为了在只能正确处理非二进制数据的系统上对二进制数据进行编码而开发的。

That means that the encoded image will be around 25% larger, plus constant overhead for the padding.

这意味着编码图像将大 25% 左右，加上填充的恒定开销。

回答by Trendfischer

The answer is: It depends.

答案是：视情况而定。

Although base64-images are larger, there a few conditions where base64 is the better choice.

尽管 base64 图像更大，但在某些情况下，base64 是更好的选择。

Size of base64-images

base64 图像的大小

Base64 uses 64 different characters and this is 2^6. So base64 stores 6bit per 8bit character. So the proportion is 6/8 from unconverted data to base64 data. This is no exact calculation, but a rough estimate.

Base64 使用 64 个不同的字符，这是 2^6。所以base64每8位字符存储6位。所以从未转换的数据到base64数据的比例是6/8。这不是精确的计算，而是粗略的估计。

Example:

例子：

An 48kb image needs around 64kb as base64 converted image.

一个 48kb 的图像需要大约 64kb 作为 base64 转换图像。

Calculation: (48 / 6) * 8 = 64

计算：(48 / 6) * 8 = 64

Simple CLI calculator on Linux systems:

Linux 系统上的简单 CLI 计算器：

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Or using an image:

或者使用图像：

$ cat my.png|base64|wc -c

Base64-images and websites

Base64 图像和网站

This question is much more difficult to answer. Generally speaking, as larger the image as less sense using base64. But consider the following points:

这个问题更难回答。一般来说，图像越大，使用 base64 的意义就越小。但请考虑以下几点：

• A lot of embedded images in an HTML-File or CSS-File can have similar strings. For PNGs you often find repeated "A" chars. Using gzip (sometimes called "deflate"), there might be even a win on size. But it depends on image content.
• Request overhead of HTTP1.1: Especially with a lot of cookies you can easily have a few kilobytes overhead per request. Embedding base64 images might save bandwith.
• Do not base64 encode SVG images, because gzip is more effective on XML than on base64.
• Programming: On dynamically generated images it is easier to deliver them in one request as to coordinate two dependent requests.
• Deeplinks: If you want to prevent downloading the image, it is a little bit trickier to extract an image from an HTML page.

• HTML 文件或 CSS 文件中的许多嵌入图像可以具有相似的字符串。对于 PNG，您经常会发现重复的“A”字符。使用 gzip（有时称为“deflate”），甚至可能在大小上获胜。但这取决于图像内容。
• HTTP1.1 的请求开销：特别是在有很多 cookie 的情况下，每个请求很容易有几千字节的开销。嵌入 base64 图像可能会节省带宽。
• 不要对 SVG 图像进行 base64 编码，因为 gzip 在 XML 上比在 base64 上更有效。
• 编程：在动态生成的图像上，更容易在一个请求中交付它们以协调两个相关请求。
• 深层链接：如果你想阻止下载图像，从 HTML 页面中提取图像有点棘手。

回答by Oded

Encoding an image to base64 will make it about 30% bigger.

将图像编码为 base64 将使其大 30% 左右。

See the details in the wikipedia article about the Data URI scheme, where it states:

请参阅维基百科文章中有关Data URI scheme的详细信息，其中指出：

Base64-encoded data URIs are 1/3 larger in size than their binary equivalent. (However, this overhead is reduced to 2-3% if the HTTP server compresses the response using gzip)

Base64 编码的数据 URI 的大小比它们的二进制等效值大 1/3。（但是，如果 HTTP 服务器使用 gzip 压缩响应，则此开销会减少到 2-3%）

回答by Oded

It will definitely cost you more space & bandwidth if you want to use base64 encoded images. However if your site has a lot of small images you can decrease the page loading time by encoding your images to base64 and placing them into html. In this way, the client browser wont need to make a lot of connections to the images, but will have them in html.

如果您想使用 base64 编码的图像，它肯定会花费您更多的空间和带宽。但是，如果您的站点有很多小图像，您可以通过将图像编码为 base64 并将它们放入 html 来减少页面加载时间。通过这种方式，客户端浏览器不需要对图像进行大量连接，而是将它们保存在 html 中。