将图像流直接放在css中的好处

Question

将图像直接放入css会更快，因为它会减少DNS / http请求的数量吗？

图片直接在css中显示：

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK7CAYAAAAz2+WzAAAAZElEQVRIx+2WwQ4AEAxDGz7X/5/rG8TaCi49iD3bxBQARgOAL1+kwuLNlKXBYigNfaEWQAWZ2nq5seYNs6F0EUuUQOISQGGbbICbT/NeaOCp8eIZ8cbMPvM3jXqLlJfKGs2+wpvWvG54wI6NvgAAAABJRU5ErkJggg==);

间接在css中的图片：

background: url('images/wrapper-bg.png');

Answer 1

这是优化的一个很好的例子 - 太远了。

纯粹在减少http请求的数量方面考虑它真的很诱人;减少了请求，你会减少加载时间，对吗？

嗯，是的，那是对的。但您还需要考虑其他性能方面。如果您只考虑性能的一个方面，那么很容易在其他方面影响您的表现。

• 文件大小：Base64编码会增加37％的图像大小。因此，对于每10k个文件，如果你对base64进行编码，你可以额外增加3.5k。

• 解码：在正常处理之前，浏览器必须将Base64解码回常规图像文件。这需要时间。可能会因为减少http请求而节省的时间。

• 缓存：浏览器​​缓存内容。这很好，有助于我们减少下载，它适用于CSS和图像。但是，当然，如果您对站点进行了更改，则需要重新下载更改的文件。如果更改的文件包含所有图像，那么这意味着重新下载整批文件，而不仅仅是一小部分。您填充到单个文件中的内容越多，对您的网站进行少量更改就越有可能强制该文件需要由之前缓存过的所有浏览器重新加载。

  < / LI>

• 维护：在浏览器上优化您的网站性能非常好，但除非您真正压缩网站的每一滴速度，否则您应该将代码的可维护性置于类似的优先级（如果不高于）。数据URI不易使用。有一些工具可以提供帮助，但最终，如果你有一个简单的图像文件和一个纯文本的CSS文件，它更容易阅读，更容易使用，更容易在需要时替换元素，并且更容易调试。想想你自己的表现以及你的代码表现。

您可能需要阅读this recent article on the subject（以及其中链接的其他文章）。

简短的回答是，如果您出于性能原因专门使用数据URI来减少图像中的http请求，那么您不太可能获得您希望的性能提升。

Answer 2

不，将图像放在css中并不是一个好主意。浏览器无论如何都会缓存内容，所以除了在第一次加载时它不会使任何速度更快。不要忘记通过将图像数据放入CSS中而获得的可怕混乱......

此外，当您发送正确的缓存标头，甚至可能使用带时间戳的URL（即资源的mtime是其URL的一部分）时，您可以告诉浏览器长时间缓存所有内容，当您更改某些内容时，它将被重新加载来自服务器。