PNG或CSS图标 - 性能更好？

Question

我正在处理一个网站的小小的单色像素图标。什么解决方案将具有更高的性能，包含所有图标的精灵表，以及使用纯CSS构建的悬停状态或图标。

example CSS

PNG

my_incon.png

CSS

.icon{
       width:  20px;
       height: 20px;
       Background: red;
       ....
     }

Answer 1

CSS将具有更高的性能，原因如下：

• 网络开销很小。每个PNG都有标题需要下载。
• 浏览器“绘画”。 PNG需要浏览器在分析文件后绘制像素。 CSS不需要，因为它只会被渲染到浏览器。
• 同时下载。每个PNG都将在单独的HTTP调用中下载，但CSS会下载一次并呈现出来。

Answer 2

CSS精灵会有更好的表现。如果您使用http://gtmetrix.com/测试您的网站，那么您会发现对服务器的较少调用将提高网站的速度，我猜CSS精灵对服务器的调用较少。