css - 使用动画 gif 作为 CSS 精灵是一个好习惯吗？

Question

我有一个网站，当你弹出动画图标mouseover时

但我认为这可能会导致浏览器的图形性能不佳。我可以将动画图标放在一个精灵中，而将非动画图标放在另一个中，但有什么意义呢？这样，精灵就不再有用了。您是否建议使用手动为放置在精灵中的图标设置动画的脚本？你的建议是什么？因为我需要一个好的表现。

Answer 1

不要猜，测试！严重地。只要动画 gif 的尺寸合理，我怀疑这将是一个大问题。但是，找出答案的最佳方法是尝试一下。尝试使用 Chrome 或 Safari 的 Web Inspector 使用各种策略（无动画、动画图标在一个单独的文件中、所有内容都在一个图像中）来分析页面加载时间，看看哪个表现最好。如果没有太大区别，请选择最简单的一个。如果性能成为问题，您可以随时更改它。

Answer 2

gif 压缩格式是一种棘手的格式，因为所有空白空间都不会像 jpg 或 png（按位）那样处理。然而，随着动画数量的增加和颜色数量的增加，gif 格式将开始崩溃。您应该做的是根据精灵图像的大小测试各个大小。移动精灵的性能根本不是问题，但正如其他答案所说，您必须使用不同的浏览器和外形尺寸对其进行测试。

Answer 3

几乎自万维网 (www) 出现以来，所有主流浏览器都支持动画 GIF；2 几十年前。如果他们对不支持 Lynx 等图形的人的任何现代浏览器摘录有任何担忧，我会感到非常惊讶。

如果帧速率太高，您可能会遇到某些浏览器的问题，但您向我们展示的这些图标显然不是这种情况。