CSS精灵与数据URI

base64编码的数据大约比原始字节大1/3,因此在下载所有图像数据所花费的时间是发出请求时间的三倍以上的页面上,css sprites从性能上来说是优越的。

此外,内联数据URI使文件本身的加载时间与实际数据加上base64编码图像的加载时间一样长。如果数据URI在实际的HTML页面上,则意味着渲染将停止并等待图像加载。如果数据URI在样式表中,这意味着数据URI之后的任何规则都必须等待它才能进行处理。另一方面,使用sprite文件,图像可以与其他资源同时加载。这可能值一个额外请求的成本,尤其是考虑到base64惩罚时。

我认为支持IE5、6和7是在URI上使用sprites的一个很好的理由,如果这些目标对您很重要的话。