html - 普通图像与 base 64 图像

This question already has answers here:

Should I embed images as data/base64 in CSS or HTML

(7 个回答)


5年前关闭。




假设我有一个名为 - 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 编码小的可重用元素，例如简单的图标，而不是人物肖像。 60KB 的东西太大了恕我直言。您可以通过将图像以 base 64 编码到 CSS 文件中来节省请求，但是在少量 60KB 图像之后，您的 CSS 文件将变得很重，而且没有任何实际的 CSS。不久之后，您可能会发现自己只有几 MB 的 CSS 文件，浏览器将不得不等待整个文件下载并解析，然后才能开始使用您的 CSS 呈现页面。

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

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

将 Base 64 编码字体转换为 CSS 文件也可以快速降低其重量。

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

关于html - 普通图像与 base 64 图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31658382/