哪种技术在css中显示图像更快？

Question

技术1

.realimage {background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')}

技术2

.realimage {background: url('http://..test.jpg);

问题

1. 如果我需要在同一页上显示多个相同的图片，我认为技术2应该更快吗？因为后续检索图像会来自浏览器缓存吗？

2. 如果我需要在不同页面上显示多个相同图片，我认为技术2应该更快吗？因为后续检索图像将来自浏览器缓存？

Answer 1

我对技术1的主要观点是：

• 数据URI不是那种广泛支持的（当然我特别关注IE）
• 不同CSS文件中使用的相同图像会导致不必要的开销
• CSS文件变得不必要的大

技术2应该是首选。最初它会导致额外的HTTP请求，但无论在何处使用（HTML，CSS，Javascript），都会缓存相同URL的每个后续使用。