使用动画gif作为CSS精灵是一种很好的做法吗？

Question

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

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

Answer 1

不要猜测，测试！我是认真的。只要动画gif的尺寸是合理的，我怀疑这不会是一个大问题。然而，找到答案的最好方法是尝试一下。尝试使用Chrome或Safari的Web Inspector通过各种策略(无动画、单独文件中的动画图标、一张图片中的所有内容)来分析页面加载时间，看看哪种策略的性能最好。如果没有太大的区别，选择最简单的。如果性能成为问题，您可以随时更改它。

Answer 2

gif压缩格式是一个棘手的格式，因为所有的空格都不会像在jpg或png (按位)中那样处理。然而，随着动画数量的增加和颜色数量的增加，gif格式将开始崩溃。你应该做的是根据精灵图像的大小测试各个大小。移动精灵的性能应该根本不是问题，但正如其他答案所说的那样，你必须用不同的浏览器和形状因子来测试它。

Answer 3

自从近20年前万维网(Www)诞生以来，所有主流浏览器都支持GIF动画。如果他们关心那些不支持像Lynx这样的图形的人的任何现代浏览器摘录，我会感到非常惊讶。

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