CSS sprites与数据URI

Question

我听说过很多关于使用精灵的重要性，以便让您的请求倒计时。但我的想法是，不是使用精灵，而是使用URI来完成同样的事情，并且更容易（不需要精灵创建）。

使用精灵或uris更好吗？

Answer 1

Base64编码的数据比原始字节大约1/3，因此在下载所有图像数据的页面所需的时间是请求的三倍以上时，CSS精灵在性能基础上更胜一筹。

此外，内联数据URI使文件本身的加载时间与实际数据加上base64编码的图像一样长。如果数据URI位于您的实际HTML页面上，则表示渲染停止并等待加载图像。如果数据URI在样式表中，则表示数据URI之后的任何规则必须等待它才能处理它们。另一方面，使用精灵文件，图像可以与您的其他资源同时加载。这可能值得一个额外请求的成本，特别是当您考虑base64惩罚时。

Answer 2

我认为对IE5,6和7的支持是使用精灵而非URI的一个很好的理由，如果这些目标对你很重要。