普通图像vs基数64图像

Question

假设我有一个名为-myImage.png的图像，
并且正在将其与<img>标记一起使用，或者background-image其实这并不重要：

<img src="myImage.png" />

因此，我决定将其转换为基本64位映像：

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

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

现在，我的逻辑是，两个映像都将具有相同的性能和相同的服务器响应，因为它们都具有相同的大小，但是我开始怀疑，想知道基本64映像是否会更快，更轻量级并有更好的表现

Answer 1

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

例如，我最近从事的一个项目的视频在视频的占位符/海报图片上带有占位符/海报图片和播放按钮图标（类似于ESPN网站上的图标。当base 64编码时，该图标不到1KB）在网站上花费了很多时间，因此在这种情况下将其烘焙到CSS文件中是很有意义的。

当今的浏览器在解析图像的HTML文档时会向前看，因此它们可以在等待CSS和JS文件等其他资源时开始请求和接收图像。下载后，如果在服务器上使用TTL进行了正确配置，则图像将被缓存以备将来使用，并且页面的呈现速度甚至更快，因为浏览器将使用其缓存中的图像，而不是从网站所在的服务器请求复制托管。

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

虽然可能会减少向服务器发送图像请求的数量，但会增加接收另一个图像的时间。测试一些事情，看看是什么为您带来最佳性能。哪个更快？一个包含“所有”或多个但快速请求的大文件？