使用 base64 编码图像是否有一些性能优势？答案

【问题标题】：Is there some performance benefit using base64 encoded images?使用 base64 编码图像是否有一些性能优势？
【发布时间】：2012-01-11 14:46:26
【问题描述】：

对于小尺寸图像，在 javascript 文件（或纯 HTML 文件）中使用 base64 编码图像在加载时间方面有什么好处（如果有的话）？

$(document).ready(function(){
    var imgsrc = "../images/icon.png";
    var img64  = "P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB";

    $('img.icon').attr('src', imgsrc); // Type 1
    $('img.icon').attr('src', 'data:image/png;base64,' + img64); // Type 2 base64
});

【问题讨论】：

您将一个请求保存到服务器。对于小图像，如果网络延迟大于解码图像所花费的时间，这会有所帮助。
请注意，只是为了澄清——只有在您已经支付了请求开销的文件中包含图像时才会有帮助。即，如果将 BASE64 图像添加到 index.html，则将单独的命中保存到 icon.png。但是，如果您将 BASE64 图像放在 icon.html 中，然后请求它代替 icon.png，那么您什么也做不了。

标签： javascript html css image base64

【解决方案1】：

好处是您必须少发出一个 HTTP 请求，因为图像“包含”在您已经发出请求的文件中。量化这取决于很多参数，例如缓存、图像大小、网络速度和延迟，因此唯一的方法是测量（实际测量肯定不适用于所有地方的所有人）。

我应该提到另一种减少 HTTP 请求数量的常用方法是使用CSS sprites 将许多图像放入一个文件中。这可以说是一种更有效的方法，因为它还可以减少传输的字节（base64 使字节大小膨胀了大约 1.33 倍）。

当然，您最终会为此付出代价：修改图形资源的便利性降低。

【讨论】：

"base64 使字节大小膨胀了大约 1.33 倍" 假设您的服务器不压缩文本文件。

【解决方案2】：

您需要发出多个服务器请求，假设您下载了一些人为的 HTML，例如：

<img src="bar.jpg" />

您已经需要提出请求才能获得它。创建、协商、下载该 HTML 并关闭 TCP/IP 套接字。您下载的每个文件都会发生这种情况。

所以关闭你的浏览器去创建一个新的连接并下载那个jpg，P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB

传输那一点点文本的时间很长，不是因为文件下载，而只是因为要进行下载部分的协商。

一张图片需要做很多工作，因此您可以使用 base64 编码嵌入图片。请注意，这不适用于旧版浏览器，仅适用于现代浏览器。

base64 内联数据背后的相同想法是为什么我们做了闭包编译器（根据执行时间优化下载速度）和 CSS Spirtes（从一个请求中获取尽可能多的数据，但不会太慢） .

base64 内联数据还有其他用途，但您的问题是关于性能的。

注意不要认为 HTTP 开销如此巨大，而您应该只发出一个请求——这太愚蠢了。你不想太过分和内联所有的东西，只是非常琐碎的部分。这不是你应该在很多地方使用的东西。关注点分离是好的，不要开始滥用这一点，因为您认为您的页面会更快（实际上它们会更慢，因为单个文件的下载量很大，并且您的页面在完成之前不会开始预渲染)。

【讨论】：

【解决方案3】：

它会保存您对服务器的请求。

当您通过 src-property 引用图像时，它将加载页面，然后执行附加请求以获取图像。

当您使用 base64 编码的图像时，它会为您节省延迟。

【讨论】：

所以你认为对于小图像（比如 10K 以下）最好使用 base64 编码？
在这些情况下，我会优先考虑使其可维护。如果您确定它对您未来的开发和维护工作的影响不会因此而变得过于复杂，那么是的：值得这样做。否则，我认为不值得。