使用内联/Base64图像在网站上比仅链接到硬文件快多少？

Question

使用base64/line来显示图像与仅链接到服务器上的文件相比，速度快多少？

url(data:image/png;base64,.......)

我还没有找到任何关于这个的性能指标。

我有一些顾虑：

• 您不再获得缓存的好处
• 一个base64字符串是不是比PNG/JPEG文件大很多？

让我们定义“更快”是指：用户看到完整呈现的HTML网页所需的时间

- Tim

Answer 1

对于“更快”的问题很难回答，因为有很多可能的解释和情况：

使用Base64编码会将图像扩展了三分之一，这将增加带宽利用率。另一方面，将其包含在文件中将消除向服务器的另一个GET回程路线。因此，对于具有高吞吐量但延迟较差（例如卫星互联网连接）的管道，将内嵌的图像加载到页面上可能比使用单独的图像文件更快。即使在我（乡村，速度慢）的DSL线路上，需要许多往返行程的站点加载时间也比只需要少量GET请求的站点长得多。

如果您每个请求都从源文件进行Base64编码，则会使用更多的CPU，使您的数据缓存失效等，这可能会损害服务器的响应时间。（当然，您可以始终使用memcached或类似的东西来解决这个问题）。

这样做当然会防止大多数缓存形式，如果图像经常被查看（比如每个页面都显示的标识），这可能会产生很大影响，因为通常浏览器（或像squid或其他代理缓存）可以对其进行缓存，并且每个月只需请求一次。它还将阻止Web服务器针对使用内核API（例如sendfile（2））提供静态文件的许多优化。

基本上，这样做在某些情况下有所帮助，而在其他情况下则会有所损害。在您真正确定这是否值得尝试之前，您需要确定哪些情况对您很重要。

- Jack Lloyd

---

让我们将“更快”定义为用户查看完整渲染的HTML网页所需的时间。 - Tim

在服务器端进行缓存/性能优化可能并不是那么棘手。您仍然可以将页面部分地缓存到文件中，因此无需重复将图像转换为base64。如果您的页面不经常更改，还可以告诉浏览器缓存html文件本身。 - Jani Hartikainen

说得好。在较小的服务器中，最好从单独的文件服务器加载图像。 - MartianMartian

“让我们将‘更快’定义为”什么用户？他们的管道是什么样的？他们有多频繁地访问您的页面？使用了哪些缓存策略？关键是没有单一的“更快”指标，也没有单一的答案。” - dmckee --- ex-moderator kitten

Answer 2

我已经比较了两个包含1800个一像素图像的HTML页面。

第一个页面将图像声明为内联元素：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC">

第二个示例中，图像引用了外部文件：

<img src="img/one-gray-px.png">

我发现当多次加载同一张图片且声明为inline时，浏览器会对每个图像执行一次请求（我猜测它每个图像解码一次 base64），而在其他情况下，每个文档只请求一次该图像（请参见下面的比较图像）。

包含嵌入式图像的文档加载大约需要250毫秒，而包含链接图像的文档则只需要30毫秒。

（使用Chromium 34进行测试）

一个 HTML 文档中多个实例的相同内联图像场景本身并不太合理。但是，我发现插件jquery lazyload默认为所有“懒惰”的图像定义了一个内联占位符，其 src 属性将被设置为它。然后，如果文档包含许多懒惰的图像，则可能发生上述情况。

- pau.moreno

---

你是否启用了缓存？ - austin_ce

如果您将Base64图像放入CSS类而不是img标记中，它将非常快速，并且您可以控制缓存和生命周期。 - Brian Cannard

如果我在CSS中使用Base64图像作为"background-image"，会影响网页速度吗？（这会向服务器发送请求以查找图像吗？） - Viral

使用base64图像的优势似乎在于小图像，而不是大图像。因此，对小图像进行测试会更有趣。 - Gabriel Beauchemin-Dauphinais

Answer 3

您将不再获得缓存的好处

这是否重要取决于您对缓存的依赖程度。

另一个（也许更重要的）问题是，如果有许多图像，则浏览器不会同时获取它们（即并行获取），而只会一次获取几个 - 因此协议最终变得啰嗦。如果存在某些网络端到端延迟，则许多图像除以一次获取的少量图像乘以每个图像的端到端延迟结果是在加载最后一个图像之前需要花费明显的时间。

Base64的大小比PNG / JPEG文件大小大得多，不是吗？

文件格式/图像压缩算法相同，我想，即它是PNG。

使用Base-64，每个8位字符表示6位：因此，二进制数据的解压缩比率为8比6，即仅约35％。

- ChrisW

---

如果您的服务器使用gzip或deflate进行服务（大多数都是这样），那么基本上差不多，因为base64对压缩图像并没有太大影响。一个大小为214312字节的随机测试图片在经过gzip压缩后大小变为213879字节，而经过base64编码后大小变为285752字节，并再次经过gzip压缩后大小变为215779字节。因此，如果考虑到多个请求的头部开销，实际上它们基本相同。 - Danial

Answer 4

它快多少倍？

“快”是指HTTP性能（见下文）还是渲染性能？

您将不再获得缓存的好处

实际上，如果您在CSS文件中执行此操作，它仍将被缓存。当然，对CSS进行任何更改都会使缓存失效。

在某些情况下，这可以用作比许多HTTP连接更大的性能提升。我说“某些情况”，因为您可能可以利用像图像精灵之类的技术来处理大多数内容，但拥有另一个工具总是好的！

- roryf

---

您也将从减少的HTTP请求数量中获益匪浅。 - David Snabel-Caunt

让我们把“更快”定义为用户查看完整呈现的HTML网页所需的时间。 - Tim