CSS生成图标与图像

Question

无图像设计（使用CSS生成图标）是否会比传统的基于图像的设计加载更快？

注意：我完全理解能够更改图标颜色，大小等的灵活性。对CSS文件进行一些更改会更有效率，但我不确定加载时间。

背景： 我正在寻找为客户完成项目，这是一个使用CSS生成页面图标的无图像设计，这是减少移动设备加载时间的项目要求。通常情况下，我只会在图像精灵中切出图标，而不用担心看到浏览器只需要在图像上加载和缓存的加载时间。

谢谢！

Answer 1

是的，如果站点图标可以完全在（相对有效的）CSS中生成，则加载速度比图像快。问题在于大多数图标太复杂而无法使用CSS生成，并且CSS可能在某些边缘情况下变得如此复杂，以至于与跨浏览器维护复杂代码相关的维护问题可能超过其益处。但总的来说，如果你可以在CSS中完成它而不必向后弯曲，那将是优化 - 在你描述的场景中可能值得优化。

Answer 2

我认为问题不在于它是否更快，而在于它是否是一个好主意。我不会牺牲使用图像的灵活性，将所有内容都变成纯CSS。您保证跨浏览器与图像兼容，这是CSS3无法做到的。加上图像更容易维护。

Answer 3

以这种方式思考.. css图标的大小（生成图标所需的代码大小）是一个优势，另一个主要优点是服务器命中。对于永远的图像图标，有一个命中，这意味着有一个等待时间，下载时间和渲染时间，虽然它只在几毫秒内等待时间和下载时间与您的服务器负载成正比。

在这种情况下，css3图标不仅可以节省时间和带宽，还可以减少服务器命中率，因为css文件只下载一次，并且它包含整个站点的所有样式声明。

选择css图标的优势是巨大的。但是在某些情况下，css图标不够用，因此开发人员可以根据要求从css图标或图像中进行选择。