普通图像与 base 64 图像 [重复]答案

【问题标题】：Normal image Vs base 64 image [duplicate]普通图像与 base 64 图像 [重复]
【发布时间】：2015-10-17 22:49:16
【问题描述】：

假设我有一个名为 - myImage.png
的图像我将它与<img> 标签或background-image 一起使用，这并不重要：

<img src="myImage.png" />

所以我决定将其转换为 base 64 图像：

.myImage {
    background: 0 no-repeat;
    background-image: url(data:image/jpeg;base64,/9j/4AA...SOV//2Q==);
}

图像作为 .png 文件的正常大小，例如 - 60KB。
然后如果我创建一个 .css 文件，粘贴上面提到的 .myImage 的代码块并保存，保存文件后它的大小也将是 - 60KB。

现在我的逻辑是，两个图像将具有相同的性能和相同的服务器响应，因为它们具有相同的大小，但我开始怀疑并想知道 base 64 图像是否真的会更快，更轻巧，性能更好。

【问题讨论】：

您确定它们的尺寸相同吗？你检查了吗？
实际上它们的大小不一样，带有 base 64 图像的 .css 文件似乎更大。这只是一个例子。
base64 通常会大 30% 左右，我认为这是在大多数情况下不使用它的充分理由。
感谢@SteveSanders，这很有帮助，而且切中要害。

标签： html css image base64

【解决方案1】：

我只会对小型可重复使用的元素（如简单图标）进行 base 64 编码，但不会对人的肖像进行编码。 60KB 的东西太大了imho。您可以通过 base 64 将图像编码到 CSS 文件中来节省请求，但是在少量 60KB 图像之后，您的 CSS 文件会变得很重，而且没有任何实际的 CSS。不久之后，您可能会发现自己拥有几 MB 的 CSS 文件，而浏览器将不得不等待整个文件下载并解析，然后才能开始使用您的 CSS 呈现页面。

例如，我最近参与的一个项目有一个视频，其中有一个占位符/海报图像，在视频的占位符/海报图像上方有一个播放按钮图标（很像 ESPN's 网站上的图标。图标不到 1KB当 base 64 编码并在网站上多次使用时，因此在这种情况下将其烘焙到 CSS 文件中是有意义的。

当今的浏览器在解析 HTML 文档以获取图像时会提前处理，以便在浏览器等待其他资源（如 CSS 和 JS 文件）时开始请求和接收图像。下载后，如果在服务器上使用TTL 正确配置，您的图像将被缓存以供将来使用，并且页面将呈现更快，因为浏览器将使用其缓存中的图像而不是从服务器请求副本您的网站是托管的。

Base 64 编码字体到 CSS 文件中也可以快速降低。

虽然您可能会减少对服务器的图像请求数量，但您将增加接收另一个图像所需的时间。测试一些东西，看看什么能给你最好的性能。哪个更快？一个包含“所有”的大文件还是多个快速请求？

【讨论】：

您忘了指出，base64 编码的数据平均要大 33%，因此您更有可能使有效负载比以前更糟。