普通图像与 base 64 图像

Question

假设我有一张名为 - 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 图像是否真的会更快、更轻便并具有更好的性能。

Answer 1

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

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

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

将 Base 64 编码字体放入 CSS 文件中也可以快速降低重量。

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

普通图像与 base 64 图像

Normal image Vs base 64 image

html

css

base64

image