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's网站。图标刚好在当base 64编码以及在网站上多次使用时，1KB是有意义的，因此在该实例中将其烘焙到CSS文件中是有意义的。

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

将64位字体编码到CSS文件中也可以快速权衡它。

虽然您可能会减少向服务器请求图像的次数，但您将增加接收另一次图像所需的时间。测试一些东西，看看是什么给你最好的表现。哪个更快？在大型文件中包含＆＃34;所有内容＆＃34; 或多个快速请求？

正常图像Vs base 64图像

1 个答案: